一个简易的纯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>

更多推荐

Js制作简单的网页