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

1 概述

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

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><!--<img src="img/none-box.png" alt="图片加载失败!"/>--></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: 2px 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: 18px;
        line-height: 50px;
        transition: all 0.2s ;
    }
    .right .top img{
        width: 2%;
        margin: 15px;
        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: 2px solid black;
        background-color: rgba(61, 61, 61, 0.8);
        box-shadow: 10px 10px 10px black;
        border-radius: 8px;
        float: left;
        transition: all 0.15s;
        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: 400px;
        height: 450px;
        font-weight: bolder;
        position: absolute;
        border-radius: 10px;
        left: 36%;
        top: 110px;
        border: 2px solid black;
        overflow: hidden;
    }

    .changePassword .top{
        width: 100%;
        height: 8%;
        background-color: #464646;
        border-radius: 8px;
        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: 8px;
        background:url("img/adBg.png");
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.95;
        overflow: hidden;
    }

    .changePassword .conttable{
        margin: 80px auto;
        text-align: center;
    }

    .changePassword .conttable tr{
        height: 35px;
        line-height: 50px;
    }

    .changePassword .conttable input{
        width: 150px;
        height: 28px;
        border-radius: 5px;
        text-align: center;
    }

    .changePassword .conttable .set{
        width: 76%;
        height:40px;
        background-color: #1a1402;
        border-radius: 5px;
        color: white;
        font-size: 16px;
        font-weight: bolder;
        letter-spacing: 5px;
        text-align: center;
        margin-top: 60px;
    }

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如下：

 <style>*{margin: 0;padding: 0;}.container {width: 100%;height: 80%;background: orange;text-align: center;position: absolute;}.btnLi{width: 240px;line-height: 45px;background-color: #1a1402;border-radius: 5px;color: #efaf06;font-size: 20px;font-weight: bolder;letter-spacing: 10px;text-align: center;margin: 50px;}.container h1{color: white;font-family: 楷体;margin: 50px auto;}.container table tr{line-height: 50px;}.input{width:150px;height:25px;border-radius: 5px;}.register {margin:0 auto;}</style>

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

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

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

        var userArray=[];window.onload=function(){initUser();//从本地取得用户的用户名和密码，并转换成对象数组var userArrayStr=localStorage.userInfo||"";userArray=eval("("+userArrayStr+")");};function initUser(){if(!localStorage.userInfo) {var uArray = [{userName: "zhangsan",passWord: "123"}];var str = JSON.stringify(uArray);localStorage.userInfo = str;}if(!localStorage.customerInfo) {var customerArray=[{cNo:"1",cName:"张三",cCity:"山东烟台",cAddr:"创业科技大厦",cManager:"李四",cPost:"212121",cPhone:"15155152632",cStars:"3"},{cNo:"2",cName:"asd",cCity:"ads",cAddr:"666",cManager:"66",cPost:"567",cPhone:"asd",cStars:"1"}];//增加大数据for(var i=3;i<50;i++){var obj={cNo:i,cName:"张三",cCity:"山东烟台",cAddr:"创业科技大厦",cManager:"李四",cPost:"212121",cPhone:"15155152632",cStars:"3"};customerArray.push(obj);}var str=JSON.stringify(customerArray);localStorage.customerInfo=str;}//            localStorage.clear();}function getPassword(cell){for(var i=0;i<userArray.length;i++){if((cell.value==userArray[i].userName)&&userArray[i].withoutP){if(new Date().getTime()<userArray[i].withoutP){document.getElementById("passWord").value=userArray[i].passWord;break;}}else{document.getElementById("passWord").value="";}}}function login(){var userName=document.getElementById("userName").value;var passWord=document.getElementById("passWord").value;var withoutP=document.getElementsByClassName("withoutP")[0];var isLogin=false;for(var i=0;i<userArray.length;i++){if((userName==userArray[i].userName)&&(passWord==userArray[i].passWord)){isLogin=true;sessionStorage.userName=userName;location.assign("homePage.html");if(withoutP.checked){userArray[i].withoutP=new Date().getTime()+259200000;var str=JSON.stringify(userArray);localStorage.userInfo=str;}}}if(!isLogin){alert("用户名或密码错误！");}}function goRegister(){location.assign("register.html");}

②、主页的主要方法：

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

<script>var myX=0;var myY=0;var go=false;var changePassword;var offsetx=0;var offsety=0;document.onmousemove=function(e){var cont=document.getElementById("container");myX= e.clientX;myY= e.clientY;if(go){changePassword.style.left=myX-offsetx+"px";changePassword.style.top=myY-offsety+"px";//限定位置if(parseFloat(changePassword.style.left)<0)changePassword.style.left=0+"px";if(parseFloat(changePassword.style.top)<0)changePassword.style.top=0+"px";if(parseFloat(parseFloat(changePassword.style.left)+changePassword.offsetWidth)>cont.offsetWidth){changePassword.style.left=cont.offsetWidth-changePassword.offsetWidth+"px";}if(parseFloat(parseFloat(changePassword.style.top)+changePassword.offsetHeight)>cont.offsetHeight-30){changePassword.style.top=cont.offsetHeight-changePassword.offsetHeight-30+"px";}}};document.onmouseup=function(){go=false;};window.onload=function(){initUserInfo();changePassword=document.getElementById("changePassword");var changePasswordTop=document.getElementById("changePasswordTop");//鼠标按下changePassword.onmousedown=function(e){if(e.target==changePasswordTop){go=true;offsetx= e.offsetX;offsety= e.offsetY;}};//失去焦点changePassword.onblur=function(){go=false;};if(!sessionStorage.userName){location.assign("login.html");}};function initUserInfo(){var user=document.getElementsByClassName("us")[0];str="用户：";str+=sessionStorage.userName||"";user.innerHTML=str;}function getPage(index){var page=document.getElementsByClassName("page")[0];var lieTables=document.getElementsByClassName("lieTable");clear();lieTables[0].src="homePage_1.html";lieTables[1].src="homePage_2.html";lieTables[2].src="homePage_3.html";var src;switch (index){case 1:src="homePage_1.html";lieTables[0].style.display="block";lieTables[0].style.backgroundColor="#b3b3b3";break;case 2:src="homePage_2.html";lieTables[1].style.display="block";lieTables[1].style.backgroundColor="#b3b3b3";break;case 3:src="homePage_3.html";lieTables[2].style.display="block";lieTables[2].style.backgroundColor="#b3b3b3";break;}page.src=src;}//清除tableBar的颜色function clear(){var lieTables=document.getElementsByClassName("lieTable");for(var i=0;i<lieTables.length;i++){lieTables[i].style.backgroundColor="rgba(61, 61, 61, 0.8)";}}function exit(cell){var page=document.getElementsByClassName("page")[0];if(cell.parentNode.previousElementSibling){clear();cell.parentNode.previousElementSibling.style.backgroundColor="#b3b3b3";page.src=cell.parentNode.previousElementSibling.src;cell.parentNode.style.display="none";}}function changePage(cell){getPage();var page=document.getElementsByClassName("page")[0];clear();cell.parentNode.style.backgroundColor="#b3b3b3";page.src=cell.parentNode.src;}function quit(){sessionStorage.clear();location.assign("login.html");}//控制弹窗的状态function changeSate(id){var cell=document.getElementById(id);if(cell.style.display=="none"){cell.style.display="block";}else{cell.style.display="none";}}function changeThePassWord(){var userName=sessionStorage.userName;var oPw=document.getElementById("oPw").value;var nPw=document.getElementById("nPw").value;var qPw=document.getElementById("qPw").value;var userArrayStr=localStorage.userInfo||"";userArray=eval("("+userArrayStr+")");var j=0;for(var j=0;j<userArray.length;j++){if((userName==userArray[j].userName)&&(oPw==userArray[j].passWord)&&(qPw==nPw)){userArray[j].passWord=nPw;var str=JSON.stringify(userArray);localStorage.userInfo=str;changeSate("changePassword");break;}}if(j>=userArray.length){alert("信息错误!");}}</script>

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>