Js制作简单的网页

╰+哭是因爲堅強的太久メ 2022-06-10 13:38 237阅读 0赞

一个简易的纯JS的CRM管理系统

1 概述

这是一个综合的JS开发的管理系统，仅有基本功能，大约1500行代码，使用本地的数据localStorage作为临时测试数据的存储，同时用到了sessionStorage作为用户登陆信息的存储。该管理系统从用户登陆、注册到退出都采用了相关联的操作，让用户在没有登陆的情况下无法进入主页，有3天记住密码的选项，而且搜索中用了很多oninput事件更加人姓化，而且还有分页、修改密码、模糊查询等。

2 效果图如下：

![Center][]

![Center 1][]

![Center 2][]

3 主要功能

管理系统从用户登陆、注册到退出都采用了相关联的操作，让用户在没有登陆的情况下无法进入主页，有3天记住密码的选项，而且搜索中用了很多oninput事件更加人姓化，而且还有分页、修改密码、模糊查询等。

4实现方式

首先 ，就是常规的网页布局，需要一定的基础来做界面。

1.  登陆界面如下：

<**div class="content"**>  
    <**div class="cont"**>  
        <**div class="left"**>  
            <**div class="logo"**>  
                <**span class="title"**>小微</**span**><**br**/>  
                <**span class="describe"**>全球最专业的CRM</**span**>  
            </**div**>  
        </**div**>  
        <**div class="right"**>  
            <**div class="rightCell"**>  
                <**div class="login"**>  
                    <**ul**>  
                        <**li**><**sapn class="loginTiTle"**>用户登陆</**sapn**><**span**>user login</**span**></**li**>  
                        <**li class="inputLi"**><**div class="userName\_logo"**></**div**><**input id="userName" class="input" type="text" οninput="getPassword(this)"**/></**li**>  
                        <**li class="inputLi"**><**div class="passWord\_logo"**></**div**><**input id="passWord" class="input" type="password"**/></**li**>  
                        <**br**/><**br**/>  
                        <**li**><**input type="checkbox" class="withoutP"** /><**span**> 3天内记住密码</**span**></**li**>  
                        <**li**><**input type="button" class="btnLi" value="登录" οnclick="***login*()**"**/></**li**>  
                        <**li**><**input type="button" class="btnLi" value="注册" οnclick="***goRegister*()**"**/></**li**>  
                    </**ul**>  
                </**div**>  
            </**div**>  
        </**div**>  
    </**div**>  
  
    <**div class="footer"**>  
    </**div**>  
</**div**>  
</**body**>

Css如下：

*{
    
        margin: 0;
    
        padding: 0;
    
    }
    
    
    
    .content{
    
        width: 100%;
    
        height: 100%;
    
        position: absolute;
    
        background-color: gray;
    
    }
    
    
    
    .cont{
    
        width: 100%;
    
        height: 80%;
    
        background: url("img/index_bg.jpg");
    
        background-size:cover ;
    
        background-repeat: no-repeat;
    
        position: relative;
    
    }
    
    
    
    .cont .logo{
    
        width: 300px;
    
        height: 200px;
    
        position: absolute;
    
        left:50%;
    
        top: 15%;
    
    }
    
    
    
    .cont .logo span{
    
        display: block;
    
        color:white;
    
        font-family: 楷体;
    
        text-align: center;
    
    }
    
    
    
    .cont .logo .title{
    
        font-size:80px;
    
    }
    
    
    
    .cont .logo .describe{
    
        font-size: 40px;
    
    }
    
    
    
    .cont .left{
    
        width: 50%;
    
        height: 100%;
    
        position: absolute;
    
    }
    
    
    
    .cont .right{
    
        width: 50%;
    
        height: 100%;
    
        position: absolute;
    
        right: 0;
    
    }
    
    .cont .rightCell{
    
        width: 300px;
    
        height: 400px;
    
        position: absolute;
    
        left: 30%;
    
        top: 10%;
    
    }
    
    
    
    .cont .right ul{
    
        list-style: none;
    
    }
    
    
    
    .cont .right span{
    
        color: #030404;
    
        font-size: 18px;
    
    }
    
    
    
    .cont .right .loginTiTle{
    
        font-weight: bolder;
    
        font-size: 30px;
    
        line-height: 60px;
    
    }
    
    
    
    .cont .right ul li {
    
        margin-top: 15px;
    
    }
    
    
    
    .cont .right .input{
    
        border: 0;
    
        background-color: transparent;
    
        outline: none;
    
        line-height: 25px;
    
    }
    
    
    
    .cont .right .inputLi{
    
        line-height: 45px;
    
        background-color: #fff3cd;
    
        border-radius: 5px;
    
    }
    
    
    
    .cont .right .btnLi{
    
        width: 100%;
    
        line-height: 45px;
    
        background-color: #1a1402;
    
        border-radius: 8px;
    
        color: #efaf06;
    
        font-size: 20px;
    
        font-weight: bolder;
    
        letter-spacing: 10px;
    
        text-align: center;
    
    }
    
    
    
    .cont .right .login div{
    
        display: inline-block;
    
        width: 30px;
    
        height: 30px;
    
        vertical-align: middle;
    
        background-position: -3px -5px;
    
    }
    
    
    
    .cont .right .login .userName_logo{
    
        background-image: url("img/account_bg.png");
    
    }
    
    
    
    .cont .right .login .passWord_logo{
    
        background-image: url("img/passw_bg.png");
    
    }
    
    
    
    .footer{
    
        width: 100%;
    
        height: 20%;
    
        background-color: white;
    
        overflow: hidden;
    
        position: relative;
    
    }
    
    
    
    .footer p{
    
        margin: 4% 10%;
    
    }
    
    
    
    .footer .right{
    
        position: absolute;
    
        right: 2%;
    
        top: 30%;
    
    }
    
    footer .right img{
    
        vertical-align: middle;
    
    }

1.  主页如下：

<div class="container" id="container">
    
        <div class="left">
    
            <div class="t">
    
                <div>客户关系管理平台</div>
    
                <img src="img/photo.jpg" alt="图片加载失败!" width="70%" class="uimg"/>
    
                <div class="us"></div>
    
            </div>
    
        </div>
    
        <div class="right">
    
            <div class="top">
    
                <div class="lie" onclick="getPage(1)">客户管理</div>
    
                <div class="lie" onclick="getPage(2)">拜访记录</div>
    
                <div class="lie" onclick="getPage(3)">客户订单</div>
    
    
    
                <img src="img/quit.png" alt="" onclick="quit()"/>
    
                <img src="img/password.png" alt="" onclick="changeSate('changePassword')"/>
    
            </div>
    
            <div class="toolbar"></div>
    
            <div class="tableBar">
    
                <div class="lieTable" id="customer">
    
                    <span onclick="changePage(this)">客户管理 </span>
    
                    <div class="exit" onclick="exit(this)"></div>
    
                </div>
    
                <div class="lieTable" id="record" style="display: none">
    
                    <span onclick="changePage(this)">拜访记录</span>
    
                    <div class="exit" onclick="exit(this)"></div>
    
                </div>
    
                <div class="lieTable" id="order" style="display: none">
    
                    <span onclick="changePage(this)">客户订单</span>
    
                    <div class="exit" onclick="exit(this)"></div>
    
                </div>
    
            </div>
    
            <div class="content">
    
                <iframe class="page" src="homePage_1.html" frameborder="0"></iframe>
    
                
    
            </div>
    
        </div>
    
    
    
        <div class="changePassword" id="changePassword" style="display:none;" >
    
            <div class="top" id="changePasswordTop">
    
                <div class="close" onclick="changeSate('changePassword')"></div>
    
            </div>
    
            <div class="cont">
    
                <form action="">
    
                    <table width="80%">
    
                        <tr>
    
                            <td><span>原密码</span></td>
    
                            <td><input type="text" id="oPw"/></td>
    
                        </tr>
    
    
    
                        <tr>
    
                            <td><span>新密码</span></td>
    
                            <td><input type="text" id="nPw"/></td>
    
                        </tr>
    
    
    
                        <tr>
    
                            <td><span>确认密码</span></td>
    
                            <td><input type="text" id="qPw"/></td>
    
                        </tr>
    
    
    
                        <tr>
    
                            <td><input class="set" type="reset"/></td>
    
                            <td><input class="set" type="reset" value="确定" onclick="changeThePassWord()"/></td>
    
                        </tr>
    
                    </table>
    
    
    
                </form>
    
            </div>
    
        </div>
    
    
    
    </div>

Css如下：

<**style**>  
    **\***\{  
        **margin**: 0;  
        **padding**: 0;  
    \}  
    **html**\{  
        **height**: 100%;  
    \}  
    **body**\{  
        **height**: 100%;  
    \}  
    .**container**\{  
        **width**: 100%;  
        **height**: 100%;  
    \}  
    .**left**\{  
        **width**: 20%;  
        **height**: 100%;  
        **background-color**: **\#202a2d**;  
        **float**: **left**;  
    \}  
    .**left** .**t**\{  
        **margin**: 20%;  
    \}  
    .**left** .**t div**\{  
        **color**: **\#fda408**;  
        **text-align**: **center**;  
    \}  
    .**left** .**t** .**uimg**\{  
        **margin**: 15%;  
        **border**: 2**px solid white**;  
        **border-radius**:100%;  
    \}  
    .**left** .**t** .**us**\{  
        **color**: **white**;  
    \}  
  
    .**right**\{  
        **width**: 80%;  
        **height**: 100%;  
        **float**: **right**;  
        **overflow**: **hidden**;  
    \}  
    .**right** .**top**\{  
        **width**: 100%;  
        **height**: 6%;  
        **background-color**: **\#334149**;  
        **float**: **left**;  
        **overflow**: **hidden**;  
    \}  
    .**right** .**top** .**lie**\{  
        **height**: 100%;  
        **width**:15%;  
        **margin-right**:5%;  
        **line-height**: 350%;  
        **text-align**: **center**;  
        **cursor**: **pointer**;  
        **color**: **white**;  
        **float**: **left**;  
    \}  
    .**right** .**top** .**lie**:**hover**\{  
        **background-color**: **orange**;  
        **font-size**: 18**px**;  
        **line-height**: 50**px**;  
        **transition**: **all** 0.2**s** ;  
    \}  
    .**right** .**top img**\{  
        **width**: 2%;  
        **margin**: 15**px**;  
        **float**: **right**;  
        **cursor**: **pointer**;  
    \}  
  
    .**right** .**top img**:**hover**\{  
        **opacity**: 0.8;  
    \}  
  
    .**right** .**toolbar**\{  
        **width**: 100%;  
        **height**: 6%;  
        **background-color**: **\#f5b702**;  
        **float**: **left**;  
        **overflow**: **hidden**;  
    \}  
    .**right** .**tableBar**\{  
        **width**: 100%;  
        **height**: 6%;  
        **background-color**: **\#3d3d3d**;  
        **float**: **left**;  
        **overflow**: **hidden**;  
        **position**: **relative**;  
    \}  
    .**right** .**tableBar div**\{  
        **height**: 75%;  
        **width**:8%;  
        **margin-left**:2%;  
        **margin-right**:2%;  
        **margin-top**: 1.3%;  
        **line-height**: 220%;  
        **text-align**: **center**;  
        **cursor**: **pointer**;  
        **color**: **white**;  
        **border**: 2**px solid black**;  
        **background-color**: **rgba**(61, 61, 61, 0.8);  
        **box-shadow**: 10**px** 10**px** 10**px black**;  
        **border-radius**: 8**px**;  
        **float**: **left**;  
        **transition**: **all** 0.15**s**;  
        **position**: **relative**;  
    \}  
  
    .**right** .**tableBar** .**lieTablespan**\{  
        **display**: **inline-block**;  
    \}  
  
    .**right** .**tableBar** .**exit**\{  
        **height**: 100%;  
        **width**: 10%;  
        **position**: **absolute**;  
        **right**: 0;  
        **top**: 0;  
        **background-color**: **red**;  
    \}  
  
    .**right** .**tableBar div**:**hover**\{  
        **opacity**: 0.5;  
    \}  
  
    .**right** .**content**\{  
        **width**:100%;  
        **height**: 82%;  
    \}  
    .**right** .**content img**\{  
        **position**: **absolute**;  
        **left**: 50%;  
        **top**: 50%;  
        **background-repeat**: **no-repeat**;  
    \}  
  
    .**container**:**after**\{  
        **content**: **""**;  
        **display**: **block**;  
        **clear**: **both**;  
    \}  
  
    .**content** .**page**\{  
        **width**: 100%;  
        **height**: 100%;  
    \}  
  
    **\#customer**\{  
        **background-color**: **\#b3b3b3**;  
    \}  
    .**changePassword**\{  
        **width**: 400**px**;  
        **height**: 450**px**;  
        **font-weight**: **bolder**;  
        **position**: **absolute**;  
        **border-radius**: 10**px**;  
        **left**: 36%;  
        **top**: 110**px**;  
        **border**: 2**px solid black**;  
        **overflow**: **hidden**;  
    \}  
  
    .**changePassword** .**top**\{  
        **width**: 100%;  
        **height**: 8%;  
        **background-color**: **\#464646**;  
        **border-radius**: 8**px**;  
        **position**: **relative**;  
    \}  
  
    .**changePassword** .**top** .**close**\{  
        **height**: 60%;  
        **width**: 5%;  
        **background**: **url**(**"img/cha.png"**);  
        **background-size**: **cover**;  
        **position**: **absolute**;  
        **right**: 2%;  
        **top**: 20%;  
        **cursor**: **pointer**;  
    \}  
  
    .**changePassword** .**cont**\{  
        **width**: 100%;  
        **height**: 92%;  
        **border-radius**: 8**px**;  
        **background**:**url**(**"img/adBg.png"**);  
        **background-repeat**: **no-repeat**;  
        **background-size**: **cover**;  
        **opacity**: 0.95;  
        **overflow**: **hidden**;  
    \}  
  
    .**changePassword** .**conttable**\{  
        **margin**: 80**px auto**;  
        **text-align**: **center**;  
    \}  
  
    .**changePassword** .**conttable tr**\{  
        **height**: 35**px**;  
        **line-height**: 50**px**;  
    \}  
  
    .**changePassword** .**conttable input**\{  
        **width**: 150**px**;  
        **height**: 28**px**;  
        **border-radius**: 5**px**;  
        **text-align**: **center**;  
    \}  
  
    .**changePassword** .**conttable** .**set**\{  
        **width**: 76%;  
        **height**:40**px**;  
        **background-color**: **\#1a1402**;  
        **border-radius**: 5**px**;  
        **color**: **white**;  
        **font-size**: 16**px**;  
        **font-weight**: **bolder**;  
        **letter-spacing**: 5**px**;  
        **text-align**: **center**;  
        **margin-top**: 60**px**;  
    \}

1.  注册界面如下：

<div class="container">
    
        <h1>请填写以下信息!</h1>
    
            <table class="register">
    
                <tr>
    
                    <td>用户名:</td>
    
                    <td><input type="text" id="userName" class="input" /></td>
    
                </tr>
    
    
    
                <tr>
    
                    <td>密码:</td>
    
                    <td><input type="password" id="passWord" class="input" /></td>
    
                </tr>
    
                <tr>
    
                    <td>确认密码:</td>
    
                    <td><input type="password" id="passWord2" class="input" /></td>
    
                </tr>
    
            </table>
    
        <input type="button" class="btnLi" value="注册" onclick="register()"/>
    
    </div>

Css如下：

五、添加各种js来实现网页的数据交互

①、登陆界面的主要js方法：

我们更具一定的条件，需要初始化数据，然后实现界面的跳转以及登陆的简单判断

②、主页的主要方法：

这里的弹窗是用div模拟出来的，通过控制div的display来是实现弹窗的显示和消失、同时也可以拖拽，增加监听事件，同时增加分页效果，来实现大量数据显示时的人性化

1.  、table页的展示
    
    <**script**>  
        **var *onePageNumber***=20;  
      
        *//页数  
       * **var *index***=0;  
      
        *//总页数  
       * **var *pageNumber***=1;  
      
      
        *//控制弹窗的状态  
       * **function** *changeState*(id)\{  
            **var** cell=**document**.getElementById(id);  
            **if**(cell.**style**.**display**==**"none"**)\{  
                cell.**style**.**display**=**"block"**;  
            \}**else**\{  
                cell.**style**.**display**=**"none"**;  
            \}  
        \}  
      
        *//用户数据信息（二维数组）  
       * **var *loadCustomerInfoArray***=\[\];  
        *//初始化客户信息  
       * **function** *initCustomerInfo*() \{  
            **var** str = **localStorage**.**customerInfo**;  
            **var** customerInfoArray= eval(**"("** \+ str \+ **")"**);  
      
            *ifPage*(customerInfoArray);  
        \}  
      
        *//判断是否分页  
       * **function** *ifPage*(customerInfoArray,clear)\{  
            **if**(clear)\{  
                ***index***=0;  
            \}  
      
            ***loadCustomerInfoArray***=\[\];  
            ***pageNumber***=parseInt(customerInfoArray.**length**/20)+1;  
      
            **if**(customerInfoArray.**length**>***onePageNumber***)\{  
                **for**(**var** i=0;i<***pageNumber***;i\++)\{  
                    ***loadCustomerInfoArray***\[i\]=\[\];  
                    **for**(**var** j=0;j<20;j\++)\{  
                        **if**(customerInfoArray\[j\+i\*20\])\{  
                            ***loadCustomerInfoArray***\[i\]\[j\]=customerInfoArray\[j\+i\*20\];  
                        \}  
                        **else**\{  
                            **break**;  
                        \}  
                    \}  
                \}  
                *pageControl*(***index***);  
            \}**else**\{  
                *load*(customerInfoArray);  
            \}  
      
            **document**.getElementsByClassName(**"pageNumber"**)\[0\].**innerHTML**=**"第"**\+(***index***\+1)+**"/"**\+***pageNumber***\+**"页"**;  
        \}  
      
        **function** *load*(customerInfoArray)\{  
      
            **var** table= **document**.getElementById(**"table"**);  
            **var** tbody= table.**firstElementChild**;  
      
            **var** trs = tbody.**children**;  
      
            **while** (trs.**length**> 1) \{  
                **var** trl = tbody.**lastElementChild**;  
                tbody.removeChild(trl);  
            \}  
            *//导入数据  
           * **for**(**var** i=0;i<customerInfoArray.**length**;i\++)\{  
                **var** tr=**document**.createElement(**"tr"**);  
                **var** td=**document**.createElement(**"td"**);  
                td.**innerHTML**=i\+1;  
                td.**width**=**"40px"**;  
                td.**style**.**backgroundColor**=**"\#454545"**;  
                td.**style**.**color**=**"white"**;  
                tr.appendChild(td);  
      
                **if**(customerInfoArray\[i\])\{  
                    **var** td0=**document**.createElement(**"td"**);  
                    td0.**innerHTML**=**"<inputclass='cCheckbox' type='checkbox'/>"**;  
                    tr.appendChild(td0);  
      
                    **var** td1=**document**.createElement(**"td"**);  
                    td1.**innerHTML**=customerInfoArray\[i\].**cNo**;  
                    tr.appendChild(td1);  
      
                    **var** td2=**document**.createElement(**"td"**);  
                    td2.**innerHTML**=customerInfoArray\[i\].**cName**;  
                    tr.appendChild(td2);  
      
                    **var** td3=**document**.createElement(**"td"**);  
                    td3.**innerHTML**=customerInfoArray\[i\].**cCity**;  
                    tr.appendChild(td3);  
      
                    **var** td4=**document**.createElement(**"td"**);  
                    td4.**innerHTML**=customerInfoArray\[i\].**cAddr**;  
                    tr.appendChild(td4);  
      
                    **var** td5=**document**.createElement(**"td"**);  
                    td5.**innerHTML**=customerInfoArray\[i\].**cManager**;  
                    tr.appendChild(td5);  
      
                    **var** td6=**document**.createElement(**"td"**);  
                    td6.**innerHTML**=customerInfoArray\[i\].**cPost**;  
                    tr.appendChild(td6);  
      
                    **var** td7=**document**.createElement(**"td"**);  
                    td7.**innerHTML**=customerInfoArray\[i\].**cPhone**;  
                    tr.appendChild(td7);  
      
                    **var** td8=**document**.createElement(**"td"**);  
                    **var** num=customerInfoArray\[i\].**cStars**\-0;  
                    **var** stars=**""**;  
                    **for**(**var** j=0;j<num;j\++)\{  
                        stars\+=**"<span  style='color: \#f5b704'>★</span>"**;  
                    \}  
                    **for**(**var** j=0;j<(5\-num);j\++)\{  
                        stars\+=**"<spanstyle='color: \#686868'>★</span>"**;  
                    \}  
                    td8.**innerHTML**=stars;  
                    tr.appendChild(td8);  
      
                    tbody.appendChild(tr);  
                \}  
            \}  
        \}  
      
        *//添加用户  
       * **function** *addCustomer*()\{  
            **var** customerInfo=**localStorage**.**customerInfo**;  
            **var** customerArray=eval(**"("**\+customerInfo\+**")"**);  
      
            **var** cName=**document**.getElementById(**"cName"**).**value**;  
            **var** cCity=**document**.getElementById(**"cCity"**).**value**;  
            **var** cAddr=**document**.getElementById(**"cAddr"**).**value**;  
            **var** cManager=**document**.getElementById(**"cManager"**).**value**;  
            **var** cPost=**document**.getElementById(**"cPost"**).**value**;  
            **var** cPhone=**document**.getElementById(**"cPhone"**).**value**;  
            **var** cStars=**document**.getElementById(**"cStars"**).**value**;  
      
            **var** cNo=parseInt(customerArray\[0\].**cNo**)+1\+**""**;  
            **for**(**var** i=0;i<customerArray.**length**;i\++)\{  
                **if**(customerArray\[i\].**cNo**>=cNo)\{  
                    cNo=parseInt(customerArray\[i\].**cNo**)+1\+**""**;  
                \}  
            \}  
      
            **var** Customer=\{  
                **cNo**:cNo,  
                **cName**:cName,  
                **cCity**:cCity,  
                **cAddr**:cAddr,  
                **cManager**:cManager,  
                **cPost**:cPost,  
                **cPhone**:cPhone,  
                **cStars**:cStars  
            \};  
            customerArray.push(Customer);  
            **var** str=**JSON**.stringify(customerArray);  
            **localStorage**.**customerInfo**=str;  
      
            *//关闭弹窗  
            changeState*(**"addUser"**);  
      
            ***index***=***pageNumber***\-1;  
      
            *//刷新当前页  
            initCustomerInfo*();  
      
            alert(**"添加成功"**);  
        \}  
      
        **function** *del*()\{  
            **var** table=**document**.getElementById(**"table"**);  
            **var** tbody=table.**firstElementChild**;  
            **var** trs=tbody.**children**;  
      
            **var** customerInfo=**localStorage**.**customerInfo**;  
            **var** customerInfoArray=eval(**"("**\+customerInfo\+**")"**);  
      
            **for**(**var** i=0;i<trs.**length**;i\++)\{  
                **if**(trs\[i\].**firstElementChild**.**nextElementSibling**.**firstElementChild**.**checked**)\{  
                    **for**(**var** j=0;j<customerInfoArray.**length**;j\++) \{  
                        **if** (customerInfoArray\[j\].**cNo** == trs\[i\].**firstElementChild**.**nextElementSibling**.**nextElementSibling**.**innerHTML**) \{  
                            customerInfoArray.splice(j,1);  
                        \}  
                    \}  
                \}  
            \}  
      
            customerInfo=**JSON**.stringify(customerInfoArray);  
            **localStorage**.**customerInfo**=customerInfo;  
      
            **document**.getElementById(**"cCheckbox"**).**checked**=**false**;  
      
            *initCustomerInfo*();  
            alert(**"删除成功"**);  
        \}  
      
        **function** *selectAll*()\{  
            **var** cCheckbox=**document**.getElementById(**"cCheckbox"**);  
            **var** table=**document**.getElementById(**"table"**);  
            **var** tbody=table.**firstElementChild**;  
            **var** trs=tbody.**children**;  
      
            **if**(cCheckbox.**checked**)\{  
                **for**(**var** i=0;i<trs.**length**;i\++)\{  
                    trs\[i\].**firstElementChild**.**nextElementSibling**.**firstElementChild**.**checked**=**true**;  
                \}  
            \}**else**\{  
                **for**(**var** i=0;i<trs.**length**;i\++)\{  
                    trs\[i\].**firstElementChild**.**nextElementSibling**.**firstElementChild**.**checked**=**false**;  
                \}  
            \}  
        \}  
      
        *//查询  
       * **function** *search*()\{  
      
            **var** sNo=**document**.getElementById(**"sNo"**).**value**;  
            **var** sName=**document**.getElementById(**"sName"**).**value**;  
            **var** select=**document**.getElementById(**"select"**).**value**;  
      
            **var** customerInfo=**localStorage**.**customerInfo**;  
            **var** customerInfoArray=eval(**"("**\+customerInfo\+**")"**);  
            **var** temCustomerInfoArray=\[\];  
      
            **for**(**var** i=0;i<customerInfoArray.**length**;i\++)\{  
                **if**(sNo)\{  
                    **if**(sName)\{  
                        **if**((customerInfoArray\[i\].**cNo**==sNo)&&(customerInfoArray\[i\].**cName**.split(sName).**length**>1))\{  
                            temCustomerInfoArray.push(customerInfoArray\[i\]);  
                        \}  
                    \}**else**\{  
                        **if**(customerInfoArray\[i\].**cNo**==sNo)\{  
                            temCustomerInfoArray.push(customerInfoArray\[i\]);  
                        \}  
                    \}  
                \}**else if**(sName)\{  
                    **if** (customerInfoArray\[i\].**cName**.split(sName).**length**>1)\{  
                        temCustomerInfoArray.push(customerInfoArray\[i\]);  
                    \}  
                \}**else**\{  
                    temCustomerInfoArray=customerInfoArray;  
                \}  
            \}  
      
            **if**(select!=0)\{  
                **var** mNewArray=temCustomerInfoArray;  
                **for**(**var** i=0;i<mNewArray.**length**;i\++)\{  
                    **if**(mNewArray\[i\])\{  
                        **if**(mNewArray\[i\].**cStars**!=select)\{  
                            mNewArray\[i\]=**""**;  
                        \}  
                    \}  
                \}  
                temCustomerInfoArray=\[\];  
      
                **for**(**var** i=0,j=0;i<mNewArray.**length**;i\++)\{  
                    **if**(mNewArray\[i\]!=**""**)\{  
                        temCustomerInfoArray\[j\++\]=mNewArray\[i\];  
                    \}  
                \}  
            \}  
      
            *ifPage*(temCustomerInfoArray,**true**);  
        \}  
      
      
        *//页数管理  
       * **function** *pageControl*(index)\{  
            *load*(***loadCustomerInfoArray***\[index\]);  
        \}  
      
        *//翻页  
       * **function** *flip*(id)\{  
            **switch** (id)\{  
                **case** 0:  
                    **if**(***index***>=1)\{  
                        ***index***\--;  
                        *load*(***loadCustomerInfoArray***\[***index***\]);  
                    \}  
                    **break**;  
                **case** 1:  
                    **if**(***index***<***pageNumber***\-1)\{  
                        ***index***\++;  
                        *load*(***loadCustomerInfoArray***\[***index***\]);  
                    \}  
                    **break**;  
            \}  
      
            **document**.getElementsByClassName(**"pageNumber"**)\[0\].**innerHTML**=**"第"**\+(***index***\+1)+**"/"**\+***pageNumber***\+**"页"**;  
        \}  
      
      
      
        **var *myX***=0;  
        **var *myY***=0;  
        **var *go***=**false**;  
        **var *addUser***;  
        **var *offsetx***=0;  
        **var *offsety***=0;  
      
        **document**.onmousemove=**function**(e)\{  
            **var** cont=**document**.getElementById(**"cont"**);  
      
            ***myX***= e.**clientX**;  
            ***myY***= e.**clientY**;  
            **if**(***go***)\{  
                ***addUser***.**style**.**left**=***myX***\-***offsetx***\+**"px"**;  
                ***addUser***.**style**.**top**=***myY***\-***offsety***\+**"px"**;  
      
                *//限定位置  
               * **if**(parseFloat(***addUser***.**style**.**left**)<0)***addUser***.**style**.**left**=0\+**"px"**;  
                **if**(parseFloat(***addUser***.**style**.**top**)<0)***addUser***.**style**.**top**=0\+**"px"**;  
                **if**(parseFloat(parseFloat(***addUser***.**style**.**left**)+***addUser***.**offsetWidth**)>cont.**offsetWidth**)\{  
                    ***addUser***.**style**.**left**=cont.**offsetWidth**\-***addUser***.**offsetWidth**\+**"px"**;  
                \}  
                **if**(parseFloat(parseFloat(***addUser***.**style**.**top**)+***addUser***.**offsetHeight**)>cont.**offsetHeight**\-30)\{  
                    ***addUser***.**style**.**top**=cont.**offsetHeight**\-***addUser***.**offsetHeight**\-30\+**"px"**;  
                \}  
            \}  
        \};  
      
        **document**.onmouseup=**function**()\{  
            ***go***=**false**;  
        \};  
      
      
        **window**.onload=**function**()\{  
            ***addUser***=**document**.getElementById(**"addUser"**);  
            **var** addUserTop=**document**.getElementById(**"addUserTop"**);  
      
            *initCustomerInfo*();  
      
            *//鼠标按下  
           * ***addUser***.onmousedown=**function**(e)\{  
                **if**(e.**target**==addUserTop)\{  
                    ***go***=**true**;  
                    ***offsetx***= e.**offsetX**;  
                    ***offsety***= e.**offsetY**;  
                \}  
            \};  
            *//失去焦点  
           * ***addUser***.onblur=**function**()\{  
                ***go***=**false**;  
            \};  
        \};  
    </**script**>

[Center]: /images/20220610/97769563b19e4d6599711da654adbb18.png
[Center 1]: /images/20220610/fd6a2002d6ba401f8c4539fed0dab546.png
[Center 2]: /images/20220610/3e415f8f8f03463cb6c42db9653742db.png