Js制作简单的网页

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



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

1 概述

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

2 效果图如下：

Center

Center 1

Center 2

3 主要功能

  1.    管理系统从用户登陆、注册到退出都采用了相关联的操作，让用户在没有登陆的情况下无法进入主页，有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> 

  1. <**div class="footer"**>  
  2. </**div**>

</div>
</body>

  1.                  Css如下：
  3. *{
  5.     margin: 0;
  7.     padding: 0;
  9. }
  13. .content{
  15.     width: 100%;
  17.     height: 100%;
  19.     position: absolute;
  21.     background-color: gray;
  23. }
  27. .cont{
  29.     width: 100%;
  31.     height: 80%;
  33.     background: url("img/index_bg.jpg");
  35.     background-size:cover ;
  37.     background-repeat: no-repeat;
  39.     position: relative;
  41. }
  45. .cont .logo{
  47.     width: 300px;
  49.     height: 200px;
  51.     position: absolute;
  53.     left:50%;
  55.     top: 15%;
  57. }
  61. .cont .logo span{
  63.     display: block;
  65.     color:white;
  67.     font-family: 楷体;
  69.     text-align: center;
  71. }
  75. .cont .logo .title{
  77.     font-size:80px;
  79. }
  83. .cont .logo .describe{
  85.     font-size: 40px;
  87. }
  91. .cont .left{
  93.     width: 50%;
  95.     height: 100%;
  97.     position: absolute;
  99. }
  103. .cont .right{
  105.     width: 50%;
  107.     height: 100%;
  109.     position: absolute;
  111.     right: 0;
  113. }
  115. .cont .rightCell{
  117.     width: 300px;
  119.     height: 400px;
  121.     position: absolute;
  123.     left: 30%;
  125.     top: 10%;
  127. }
  131. .cont .right ul{
  133.     list-style: none;
  135. }
  139. .cont .right span{
  141.     color: #030404;
  143.     font-size: 18px;
  145. }
  149. .cont .right .loginTiTle{
  151.     font-weight: bolder;
  153.     font-size: 30px;
  155.     line-height: 60px;
  157. }
  161. .cont .right ul li {
  163.     margin-top: 15px;
  165. }
  169. .cont .right .input{
  171.     border: 0;
  173.     background-color: transparent;
  175.     outline: none;
  177.     line-height: 25px;
  179. }
  183. .cont .right .inputLi{
  185.     line-height: 45px;
  187.     background-color: #fff3cd;
  189.     border-radius: 5px;
  191. }
  195. .cont .right .btnLi{
  197.     width: 100%;
  199.     line-height: 45px;
  201.     background-color: #1a1402;
  203.     border-radius: 8px;
  205.     color: #efaf06;
  207.     font-size: 20px;
  209.     font-weight: bolder;
  211.     letter-spacing: 10px;
  213.     text-align: center;
  215. }
  219. .cont .right .login div{
  221.     display: inline-block;
  223.     width: 30px;
  225.     height: 30px;
  227.     vertical-align: middle;
  229.     background-position: -3px -5px;
  231. }
  235. .cont .right .login .userName_logo{
  237.     background-image: url("img/account_bg.png");
  239. }
  243. .cont .right .login .passWord_logo{
  245.     background-image: url("img/passw_bg.png");
  247. }
  251. .footer{
  253.     width: 100%;
  255.     height: 20%;
  257.     background-color: white;
  259.     overflow: hidden;
  261.     position: relative;
  263. }
  267. .footer p{
  269.     margin: 4% 10%;
  271. }
  275. .footer .right{
  277.     position: absolute;
  279.     right: 2%;
  281.     top: 30%;
  283. }
  285. footer .right img{
  287.     vertical-align: middle;
  289. }

  1. 主页如下：







    客户关系管理平台
    1.         <img src="img/photo.jpg" alt="图片加载失败!" width="70%" class="uimg"/>
    3.         <div class="us"></div>
    5.     </div>
    7. </div>
    9. <div class="right">
    11.     <div class="top">
    13.         <div class="lie" onclick="getPage(1)">客户管理</div>
    15.         <div class="lie" onclick="getPage(2)">拜访记录</div>
    17.         <div class="lie" onclick="getPage(3)">客户订单</div>
  1.             <img src="img/quit.png" alt="" onclick="quit()"/>
  3.             <img src="img/password.png" alt="" onclick="changeSate('changePassword')"/>
  5.         </div>
  7.         <div class="toolbar"></div>
  9.         <div class="tableBar">
  11.             <div class="lieTable" id="customer">
  13.                 <span onclick="changePage(this)">客户管理 </span>
  15.                 <div class="exit" onclick="exit(this)"></div>
  17.             </div>
  19.             <div class="lieTable" id="record" style="display: none">
  21.                 <span onclick="changePage(this)">拜访记录</span>
  23.                 <div class="exit" onclick="exit(this)"></div>
  25.             </div>
  27.             <div class="lieTable" id="order" style="display: none">
  29.                 <span onclick="changePage(this)">客户订单</span>
  31.                 <div class="exit" onclick="exit(this)"></div>
  33.             </div>
  35.         </div>
  37.         <div class="content">
  39.             <iframe class="page" src="homePage_1.html" frameborder="0"></iframe>
  41.             <!--<img src="img/none-box.png" alt="图片加载失败!"/>-->
  43.         </div>
  45.     </div>
  49.     <div class="changePassword" id="changePassword" style="display:none;" >
  51.         <div class="top" id="changePasswordTop">
  53.             <div class="close" onclick="changeSate('changePassword')"></div>
  55.         </div>
  57.         <div class="cont">
  59.             <form action="">
  61.                 <table width="80%">
  63.                     <tr>
  65.                         <td><span>原密码</span></td>
  67.                         <td><input type="text" id="oPw"/></td>
  69.                     </tr>
  73.                     <tr>
  75.                         <td><span>新密码</span></td>
  77.                         <td><input type="text" id="nPw"/></td>
  79.                     </tr>
  83.                     <tr>
  85.                         <td><span>确认密码</span></td>
  87.                         <td><input type="text" id="qPw"/></td>
  89.                     </tr>
  93.                     <tr>
  95.                         <td><input class="set" type="reset"/></td>
  97.                         <td><input class="set" type="reset" value="确定" onclick="changeThePassWord()"/></td>
  99.                     </tr>
  101.                 </table>
  105.             </form>
  107.         </div>
  109.     </div>
  113. </div>
  117. 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;
} 

  1. .**right**\{  
  2.     **width**: 80%;  
  3.     **height**: 100%;  
  4.     **float**: **right**;  
  5.     **overflow**: **hidden**;  
  6. \}  
  7. .**right** .**top**\{  
  8.     **width**: 100%;  
  9.     **height**: 6%;  
  10.     **background-color**: **\#334149**;  
  11.     **float**: **left**;  
  12.     **overflow**: **hidden**;  
  13. \}  
  14. .**right** .**top** .**lie**\{  
  15.     **height**: 100%;  
  16.     **width**:15%;  
  17.     **margin-right**:5%;  
  18.     **line-height**: 350%;  
  19.     **text-align**: **center**;  
  20.     **cursor**: **pointer**;  
  21.     **color**: **white**;  
  22.     **float**: **left**;  
  23. \}  
  24. .**right** .**top** .**lie**:**hover**\{  
  25.     **background-color**: **orange**;  
  26.     **font-size**: 18**px**;  
  27.     **line-height**: 50**px**;  
  28.     **transition**: **all** 0.2**s** ;  
  29. \}  
  30. .**right** .**top img**\{  
  31.     **width**: 2%;  
  32.     **margin**: 15**px**;  
  33.     **float**: **right**;  
  34.     **cursor**: **pointer**;  
  35. \}  
  37. .**right** .**top img**:**hover**\{  
  38.     **opacity**: 0.8;  
  39. \}  
  41. .**right** .**toolbar**\{  
  42.     **width**: 100%;  
  43.     **height**: 6%;  
  44.     **background-color**: **\#f5b702**;  
  45.     **float**: **left**;  
  46.     **overflow**: **hidden**;  
  47. \}  
  48. .**right** .**tableBar**\{  
  49.     **width**: 100%;  
  50.     **height**: 6%;  
  51.     **background-color**: **\#3d3d3d**;  
  52.     **float**: **left**;  
  53.     **overflow**: **hidden**;  
  54.     **position**: **relative**;  
  55. \}  
  56. .**right** .**tableBar div**\{  
  57.     **height**: 75%;  
  58.     **width**:8%;  
  59.     **margin-left**:2%;  
  60.     **margin-right**:2%;  
  61.     **margin-top**: 1.3%;  
  62.     **line-height**: 220%;  
  63.     **text-align**: **center**;  
  64.     **cursor**: **pointer**;  
  65.     **color**: **white**;  
  66.     **border**: 2**px solid black**;  
  67.     **background-color**: **rgba**(61, 61, 61, 0.8);  
  68.     **box-shadow**: 10**px** 10**px** 10**px black**;  
  69.     **border-radius**: 8**px**;  
  70.     **float**: **left**;  
  71.     **transition**: **all** 0.15**s**;  
  72.     **position**: **relative**;  
  73. \}  
  75. .**right** .**tableBar** .**lieTablespan**\{  
  76.     **display**: **inline-block**;  
  77. \}  
  79. .**right** .**tableBar** .**exit**\{  
  80.     **height**: 100%;  
  81.     **width**: 10%;  
  82.     **position**: **absolute**;  
  83.     **right**: 0;  
  84.     **top**: 0;  
  85.     **background-color**: **red**;  
  86. \}  
  88. .**right** .**tableBar div**:**hover**\{  
  89.     **opacity**: 0.5;  
  90. \}  
  92. .**right** .**content**\{  
  93.     **width**:100%;  
  94.     **height**: 82%;  
  95. \}  
  96. .**right** .**content img**\{  
  97.     **position**: **absolute**;  
  98.     **left**: 50%;  
  99.     **top**: 50%;  
  100.     **background-repeat**: **no-repeat**;  
  101. \}  
  103. .**container**:**after**\{  
  104.     **content**: **""**;  
  105.     **display**: **block**;  
  106.     **clear**: **both**;  
  107. \}  
  109. .**content** .**page**\{  
  110.     **width**: 100%;  
  111.     **height**: 100%;  
  112. \}  
  114. **\#customer**\{  
  115.     **background-color**: **\#b3b3b3**;  
  116. \}  
  117. .**changePassword**\{  
  118.     **width**: 400**px**;  
  119.     **height**: 450**px**;  
  120.     **font-weight**: **bolder**;  
  121.     **position**: **absolute**;  
  122.     **border-radius**: 10**px**;  
  123.     **left**: 36%;  
  124.     **top**: 110**px**;  
  125.     **border**: 2**px solid black**;  
  126.     **overflow**: **hidden**;  
  127. \}  
  129. .**changePassword** .**top**\{  
  130.     **width**: 100%;  
  131.     **height**: 8%;  
  132.     **background-color**: **\#464646**;  
  133.     **border-radius**: 8**px**;  
  134.     **position**: **relative**;  
  135. \}  
  137. .**changePassword** .**top** .**close**\{  
  138.     **height**: 60%;  
  139.     **width**: 5%;  
  140.     **background**: **url**(**"img/cha.png"**);  
  141.     **background-size**: **cover**;  
  142.     **position**: **absolute**;  
  143.     **right**: 2%;  
  144.     **top**: 20%;  
  145.     **cursor**: **pointer**;  
  146. \}  
  148. .**changePassword** .**cont**\{  
  149.     **width**: 100%;  
  150.     **height**: 92%;  
  151.     **border-radius**: 8**px**;  
  152.     **background**:**url**(**"img/adBg.png"**);  
  153.     **background-repeat**: **no-repeat**;  
  154.     **background-size**: **cover**;  
  155.     **opacity**: 0.95;  
  156.     **overflow**: **hidden**;  
  157. \}  
  159. .**changePassword** .**conttable**\{  
  160.     **margin**: 80**px auto**;  
  161.     **text-align**: **center**;  
  162. \}  
  164. .**changePassword** .**conttable tr**\{  
  165.     **height**: 35**px**;  
  166.     **line-height**: 50**px**;  
  167. \}  
  169. .**changePassword** .**conttable input**\{  
  170.     **width**: 150**px**;  
  171.     **height**: 28**px**;  
  172.     **border-radius**: 5**px**;  
  173.     **text-align**: **center**;  
  174. \}  
  176. .**changePassword** .**conttable** .**set**\{  
  177.     **width**: 76%;  
  178.     **height**:40**px**;  
  179.     **background-color**: **\#1a1402**;  
  180.     **border-radius**: 5**px**;  
  181.     **color**: **white**;  
  182.     **font-size**: 16**px**;  
  183.     **font-weight**: **bolder**;  
  184.     **letter-spacing**: 5**px**;  
  185.     **text-align**: **center**;  
  186.     **margin-top**: 60**px**;  
  187. \}

  1. 注册界面如下：

    1. <h1>请填写以下信息!</h1>
    3.     <table class="register">
    5.         <tr>
    7.             <td>用户名:</td>
    9.             <td><input type="text" id="userName" class="input" /></td>
    11.         </tr>
  1.             <tr>
  3.                 <td>密码:</td>
  5.                 <td><input type="password" id="passWord" class="input" /></td>
  7.             </tr>
  9.             <tr>
  11.                 <td>确认密码:</td>
  13.                 <td><input type="password" id="passWord2" class="input" /></td>
  15.             </tr>
  17.         </table>
  19.     <input type="button" class="btnLi" value="注册" onclick="register()"/>
  21. </div>
  25. Css如下：
  27. <style>
  29.     *{
  31.         margin: 0;
  33.         padding: 0;
  35.     }
  37.     .container {
  39.         width: 100%;
  41.         height: 80%;
  43.         background: orange;
  45.         text-align: center;
  47.         position: absolute;
  49.     }
  53.     .btnLi{
  55.         width: 240px;
  57.         line-height: 45px;
  59.         background-color: #1a1402;
  61.         border-radius: 5px;
  63.         color: #efaf06;
  65.         font-size: 20px;
  67.         font-weight: bolder;
  69.         letter-spacing: 10px;
  71.         text-align: center;
  73.         margin: 50px;
  75.     }
  79.     .container h1{
  81.         color: white;
  83.         font-family: 楷体;
  85.         margin: 50px auto;
  87.     }
  91.     .container table tr{
  93.         line-height: 50px;
  95.     }
  99.     .input{
  101.         width:150px;
  103.         height:25px;
  105.         border-radius: 5px;
  107.     }
  111.     .register {
  113.         margin:0 auto;
  115.     }
  117. </style>

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

  1.           ①、登陆界面的主要js方法：
  3.                  我们更具一定的条件，需要初始化数据，然后实现界面的跳转以及登陆的简单判断
  5.         var userArray=[];
  9.         window.onload=function(){
  11.             initUser();
  15.             //从本地取得用户的用户名和密码，并转换成对象数组
  17.             var userArrayStr=localStorage.userInfo||"";
  19.             userArray=eval("("+userArrayStr+")");
  21.         };
  25.         function initUser(){
  27.             if(!localStorage.userInfo) {
  29.                 var uArray = [{
  31.                     userName: "zhangsan",
  33.                     passWord: "123"
  35.                 }];
  37.                 var str = JSON.stringify(uArray);
  39.                 localStorage.userInfo = str;
  41.             }
  43.             if(!localStorage.customerInfo) {
  45.                 var customerArray=[{
  47.                     cNo:"1",
  49.                     cName:"张三",
  51.                     cCity:"山东烟台",
  53.                     cAddr:"创业科技大厦",
  55.                     cManager:"李四",
  57.                     cPost:"212121",
  59.                     cPhone:"15155152632",
  61.                     cStars:"3"
  63.                 },{
  65.                     cNo:"2",
  67.                     cName:"asd",
  69.                     cCity:"ads",
  71.                     cAddr:"666",
  73.                     cManager:"66",
  75.                     cPost:"567",
  77.                     cPhone:"asd",
  79.                     cStars:"1"
  81.                 }];
  87.                 //增加大数据
  89.                 for(var i=3;i<50;i++){
  91.                     var obj={
  93.                         cNo:i,
  95.                         cName:"张三",
  97.                         cCity:"山东烟台",
  99.                         cAddr:"创业科技大厦",
  101.                         cManager:"李四",
  103.                         cPost:"212121",
  105.                         cPhone:"15155152632",
  107.                         cStars:"3"
  109.                     };
  111.                     customerArray.push(obj);
  113.                 }
  117.                 var str=JSON.stringify(customerArray);
  119.                 localStorage.customerInfo=str;
  121.             }
  123. //            localStorage.clear();
  125.         }
  129.         function getPassword(cell){
  131.             for(var i=0;i<userArray.length;i++){
  133.                 if((cell.value==userArray[i].userName)&&userArray[i].withoutP){
  135.                     if(new Date().getTime()<userArray[i].withoutP){
  137.                         document.getElementById("passWord").value=userArray[i].passWord;
  139.                         break;
  141.                     }
  143.                 }else{
  145.                     document.getElementById("passWord").value="";
  147.                 }
  149.             }
  151.         }
  155.         function login(){
  157.             var userName=document.getElementById("userName").value;
  159.             var passWord=document.getElementById("passWord").value;
  161.             var withoutP=document.getElementsByClassName("withoutP")[0];
  165.             var isLogin=false;
  171.             for(var i=0;i<userArray.length;i++){
  173.                 if((userName==userArray[i].userName)&&(passWord==userArray[i].passWord)){
  175.                     isLogin=true;
  177.                     sessionStorage.userName=userName;
  179.                     location.assign("homePage.html");
  181.                     if(withoutP.checked){
  183.                         userArray[i].withoutP=new Date().getTime()+259200000;
  185.                         var str=JSON.stringify(userArray);
  187.                         localStorage.userInfo=str;
  189.                     }
  191.                 }
  193.             }
  195.             if(!isLogin){
  197.                 alert("用户名或密码错误！");
  199.             }
  201.         }
  203.         function goRegister(){
  205.             location.assign("register.html");
  207.         }

②、主页的主要方法：

  1.  这里的弹窗是用div模拟出来的，通过控制div的display来是实现弹窗的显示和消失、同时也可以拖拽，增加监听事件，同时增加分页效果，来实现大量数据显示时的人性化
  3. <script>
  5.     var myX=0;
  7.     var myY=0;
  9.     var go=false;
  11.     var changePassword;
  13.     var offsetx=0;
  15.     var offsety=0;
  19.     document.onmousemove=function(e){
  21.         var cont=document.getElementById("container");
  25.         myX= e.clientX;
  27.         myY= e.clientY;
  29.         if(go){
  31.             changePassword.style.left=myX-offsetx+"px";
  33.             changePassword.style.top=myY-offsety+"px";
  37.             //限定位置
  39.             if(parseFloat(changePassword.style.left)<0)changePassword.style.left=0+"px";
  41.             if(parseFloat(changePassword.style.top)<0)changePassword.style.top=0+"px";
  43.             if(parseFloat(parseFloat(changePassword.style.left)+changePassword.offsetWidth)>cont.offsetWidth){
  45.                 changePassword.style.left=cont.offsetWidth-changePassword.offsetWidth+"px";
  47.             }
  49.             if(parseFloat(parseFloat(changePassword.style.top)+changePassword.offsetHeight)>cont.offsetHeight-30){
  51.                 changePassword.style.top=cont.offsetHeight-changePassword.offsetHeight-30+"px";
  53.             }
  55.         }
  57.     };
  61.     document.onmouseup=function(){
  63.         go=false;
  65.     };
  69.     window.onload=function(){
  71.         initUserInfo();
  75.         changePassword=document.getElementById("changePassword");
  77.         var changePasswordTop=document.getElementById("changePasswordTop");
  81.         //鼠标按下
  83.         changePassword.onmousedown=function(e){
  85.             if(e.target==changePasswordTop){
  87.                 go=true;
  89.                 offsetx= e.offsetX;
  91.                 offsety= e.offsetY;
  93.             }
  95.         };
  99.         //失去焦点
  101.         changePassword.onblur=function(){
  103.             go=false;
  105.         };
  111.         if(!sessionStorage.userName){
  113.             location.assign("login.html");
  115.         }
  117.     };
  121.     function initUserInfo(){
  123.         var user=document.getElementsByClassName("us")[0];
  125.         str="用户：";
  127.         str+=sessionStorage.userName||"";
  129.         user.innerHTML=str;
  131.     }
  135.     function getPage(index){
  137.         var page=document.getElementsByClassName("page")[0];
  139.         var lieTables=document.getElementsByClassName("lieTable");
  143.         clear();
  145.         lieTables[0].src="homePage_1.html";
  147.         lieTables[1].src="homePage_2.html";
  149.         lieTables[2].src="homePage_3.html";
  153.         var src;
  155.         switch (index){
  157.             case 1:
  159.                 src="homePage_1.html";
  163.                 lieTables[0].style.display="block";
  165.                 lieTables[0].style.backgroundColor="#b3b3b3";
  167.                 break;
  169.             case 2:
  171.                 src="homePage_2.html";
  173.                 lieTables[1].style.display="block";
  175.                 lieTables[1].style.backgroundColor="#b3b3b3";
  177.                 break;
  179.             case 3:
  181.                 src="homePage_3.html";
  183.                 lieTables[2].style.display="block";
  185.                 lieTables[2].style.backgroundColor="#b3b3b3";
  187.                 break;
  189.         }
  191.         page.src=src;
  193.     }
  197.     //清除tableBar的颜色
  199.     function clear(){
  201.         var lieTables=document.getElementsByClassName("lieTable");
  205.         for(var i=0;i<lieTables.length;i++){
  207.             lieTables[i].style.backgroundColor="rgba(61, 61, 61, 0.8)";
  209.         }
  211.     }
  215.     function exit(cell){
  217.         var page=document.getElementsByClassName("page")[0];
  219.         if(cell.parentNode.previousElementSibling){
  221.             clear();
  225.             cell.parentNode.previousElementSibling.style.backgroundColor="#b3b3b3";
  227.             page.src=cell.parentNode.previousElementSibling.src;
  229.             cell.parentNode.style.display="none";
  231.         }
  233.     }
  237.     function changePage(cell){
  239.         getPage();
  241.         var page=document.getElementsByClassName("page")[0];
  245.         clear();
  249.         cell.parentNode.style.backgroundColor="#b3b3b3";
  251.         page.src=cell.parentNode.src;
  253.     }
  257.     function quit(){
  259.         sessionStorage.clear();
  261.         location.assign("login.html");
  263.     }
  267.     //控制弹窗的状态
  269.     function changeSate(id){
  271.         var cell=document.getElementById(id);
  273.         if(cell.style.display=="none"){
  275.             cell.style.display="block";
  277.         }else{
  279.             cell.style.display="none";
  281.         }
  283.     }
  287.     function changeThePassWord(){
  289.         var userName=sessionStorage.userName;
  291.         var oPw=document.getElementById("oPw").value;
  293.         var nPw=document.getElementById("nPw").value;
  295.         var qPw=document.getElementById("qPw").value;
  299.         var userArrayStr=localStorage.userInfo||"";
  301.         userArray=eval("("+userArrayStr+")");
  305.         var j=0;
  307.         for(var j=0;j<userArray.length;j++){
  309.             if((userName==userArray[j].userName)&&(oPw==userArray[j].passWord)&&(qPw==nPw)){
  311.                 userArray[j].passWord=nPw;
  313.                 var str=JSON.stringify(userArray);
  315.                 localStorage.userInfo=str;
  317.                 changeSate("changePassword");
  319.                 break;
  321.             }
  323.         }
  325.         if(j>=userArray.length){
  327.             alert("信息错误!");
  329.         }
  331.     }
  335. </script>

  1. 、table页的展示

    <script> 

    1. **var *onePageNumber***=20;  
    3. *//页数

    • var index=0;

      *//总页数

    • var pageNumber=1; 
  1.     *//控制弹窗的状态  
  2.    * **function** *changeState*(id)\{  
  3.         **var** cell=**document**.getElementById(id);  
  4.         **if**(cell.**style**.**display**==**"none"**)\{  
  5.             cell.**style**.**display**=**"block"**;  
  6.         \}**else**\{  
  7.             cell.**style**.**display**=**"none"**;  
  8.         \}  
  9.     \}  
  11.     *//用户数据信息（二维数组）  
  12.    * **var *loadCustomerInfoArray***=\[\];  
  13.     *//初始化客户信息  
  14.    * **function** *initCustomerInfo*() \{  
  15.         **var** str = **localStorage**.**customerInfo**;  
  16.         **var** customerInfoArray= eval(**"("** \+ str \+ **")"**);  
  18.         *ifPage*(customerInfoArray);  
  19.     \}  
  21.     *//判断是否分页  
  22.    * **function** *ifPage*(customerInfoArray,clear)\{  
  23.         **if**(clear)\{  
  24.             ***index***=0;  
  25.         \}  
  27.         ***loadCustomerInfoArray***=\[\];  
  28.         ***pageNumber***=parseInt(customerInfoArray.**length**/20)+1;  
  30.         **if**(customerInfoArray.**length**>***onePageNumber***)\{  
  31.             **for**(**var** i=0;i<***pageNumber***;i\++)\{  
  32.                 ***loadCustomerInfoArray***\[i\]=\[\];  
  33.                 **for**(**var** j=0;j<20;j\++)\{  
  34.                     **if**(customerInfoArray\[j\+i\*20\])\{  
  35.                         ***loadCustomerInfoArray***\[i\]\[j\]=customerInfoArray\[j\+i\*20\];  
  36.                     \}  
  37.                     **else**\{  
  38.                         **break**;  
  39.                     \}  
  40.                 \}  
  41.             \}  
  42.             *pageControl*(***index***);  
  43.         \}**else**\{  
  44.             *load*(customerInfoArray);  
  45.         \}  
  47.         **document**.getElementsByClassName(**"pageNumber"**)\[0\].**innerHTML**=**"第"**\+(***index***\+1)+**"/"**\+***pageNumber***\+**"页"**;  
  48.     \}  
  50.     **function** *load*(customerInfoArray)\{  
  52.         **var** table= **document**.getElementById(**"table"**);  
  53.         **var** tbody= table.**firstElementChild**;  
  55.         **var** trs = tbody.**children**;  
  57.         **while** (trs.**length**> 1) \{  
  58.             **var** trl = tbody.**lastElementChild**;  
  59.             tbody.removeChild(trl);  
  60.         \}  
  61.         *//导入数据  
  62.        * **for**(**var** i=0;i<customerInfoArray.**length**;i\++)\{  
  63.             **var** tr=**document**.createElement(**"tr"**);  
  64.             **var** td=**document**.createElement(**"td"**);  
  65.             td.**innerHTML**=i\+1;  
  66.             td.**width**=**"40px"**;  
  67.             td.**style**.**backgroundColor**=**"\#454545"**;  
  68.             td.**style**.**color**=**"white"**;  
  69.             tr.appendChild(td);  
  71.             **if**(customerInfoArray\[i\])\{  
  72.                 **var** td0=**document**.createElement(**"td"**);  
  73.                 td0.**innerHTML**=**"<inputclass='cCheckbox' type='checkbox'/>"**;  
  74.                 tr.appendChild(td0);  
  76.                 **var** td1=**document**.createElement(**"td"**);  
  77.                 td1.**innerHTML**=customerInfoArray\[i\].**cNo**;  
  78.                 tr.appendChild(td1);  
  80.                 **var** td2=**document**.createElement(**"td"**);  
  81.                 td2.**innerHTML**=customerInfoArray\[i\].**cName**;  
  82.                 tr.appendChild(td2);  
  84.                 **var** td3=**document**.createElement(**"td"**);  
  85.                 td3.**innerHTML**=customerInfoArray\[i\].**cCity**;  
  86.                 tr.appendChild(td3);  
  88.                 **var** td4=**document**.createElement(**"td"**);  
  89.                 td4.**innerHTML**=customerInfoArray\[i\].**cAddr**;  
  90.                 tr.appendChild(td4);  
  92.                 **var** td5=**document**.createElement(**"td"**);  
  93.                 td5.**innerHTML**=customerInfoArray\[i\].**cManager**;  
  94.                 tr.appendChild(td5);  
  96.                 **var** td6=**document**.createElement(**"td"**);  
  97.                 td6.**innerHTML**=customerInfoArray\[i\].**cPost**;  
  98.                 tr.appendChild(td6);  
  100.                 **var** td7=**document**.createElement(**"td"**);  
  101.                 td7.**innerHTML**=customerInfoArray\[i\].**cPhone**;  
  102.                 tr.appendChild(td7);  
  104.                 **var** td8=**document**.createElement(**"td"**);  
  105.                 **var** num=customerInfoArray\[i\].**cStars**\-0;  
  106.                 **var** stars=**""**;  
  107.                 **for**(**var** j=0;j<num;j\++)\{  
  108.                     stars\+=**"<span  style='color: \#f5b704'>★</span>"**;  
  109.                 \}  
  110.                 **for**(**var** j=0;j<(5\-num);j\++)\{  
  111.                     stars\+=**"<spanstyle='color: \#686868'>★</span>"**;  
  112.                 \}  
  113.                 td8.**innerHTML**=stars;  
  114.                 tr.appendChild(td8);  
  116.                 tbody.appendChild(tr);  
  117.             \}  
  118.         \}  
  119.     \}  
  121.     *//添加用户  
  122.    * **function** *addCustomer*()\{  
  123.         **var** customerInfo=**localStorage**.**customerInfo**;  
  124.         **var** customerArray=eval(**"("**\+customerInfo\+**")"**);  
  126.         **var** cName=**document**.getElementById(**"cName"**).**value**;  
  127.         **var** cCity=**document**.getElementById(**"cCity"**).**value**;  
  128.         **var** cAddr=**document**.getElementById(**"cAddr"**).**value**;  
  129.         **var** cManager=**document**.getElementById(**"cManager"**).**value**;  
  130.         **var** cPost=**document**.getElementById(**"cPost"**).**value**;  
  131.         **var** cPhone=**document**.getElementById(**"cPhone"**).**value**;  
  132.         **var** cStars=**document**.getElementById(**"cStars"**).**value**;  
  134.         **var** cNo=parseInt(customerArray\[0\].**cNo**)+1\+**""**;  
  135.         **for**(**var** i=0;i<customerArray.**length**;i\++)\{  
  136.             **if**(customerArray\[i\].**cNo**>=cNo)\{  
  137.                 cNo=parseInt(customerArray\[i\].**cNo**)+1\+**""**;  
  138.             \}  
  139.         \}  
  141.         **var** Customer=\{  
  142.             **cNo**:cNo,  
  143.             **cName**:cName,  
  144.             **cCity**:cCity,  
  145.             **cAddr**:cAddr,  
  146.             **cManager**:cManager,  
  147.             **cPost**:cPost,  
  148.             **cPhone**:cPhone,  
  149.             **cStars**:cStars  
  150.         \};  
  151.         customerArray.push(Customer);  
  152.         **var** str=**JSON**.stringify(customerArray);  
  153.         **localStorage**.**customerInfo**=str;  
  155.         *//关闭弹窗  
  156.         changeState*(**"addUser"**);  
  158.         ***index***=***pageNumber***\-1;  
  160.         *//刷新当前页  
  161.         initCustomerInfo*();  
  163.         alert(**"添加成功"**);  
  164.     \}  
  166.     **function** *del*()\{  
  167.         **var** table=**document**.getElementById(**"table"**);  
  168.         **var** tbody=table.**firstElementChild**;  
  169.         **var** trs=tbody.**children**;  
  171.         **var** customerInfo=**localStorage**.**customerInfo**;  
  172.         **var** customerInfoArray=eval(**"("**\+customerInfo\+**")"**);  
  174.         **for**(**var** i=0;i<trs.**length**;i\++)\{  
  175.             **if**(trs\[i\].**firstElementChild**.**nextElementSibling**.**firstElementChild**.**checked**)\{  
  176.                 **for**(**var** j=0;j<customerInfoArray.**length**;j\++) \{  
  177.                     **if** (customerInfoArray\[j\].**cNo** == trs\[i\].**firstElementChild**.**nextElementSibling**.**nextElementSibling**.**innerHTML**) \{  
  178.                         customerInfoArray.splice(j,1);  
  179.                     \}  
  180.                 \}  
  181.             \}  
  182.         \}  
  184.         customerInfo=**JSON**.stringify(customerInfoArray);  
  185.         **localStorage**.**customerInfo**=customerInfo;  
  187.         **document**.getElementById(**"cCheckbox"**).**checked**=**false**;  
  189.         *initCustomerInfo*();  
  190.         alert(**"删除成功"**);  
  191.     \}  
  193.     **function** *selectAll*()\{  
  194.         **var** cCheckbox=**document**.getElementById(**"cCheckbox"**);  
  195.         **var** table=**document**.getElementById(**"table"**);  
  196.         **var** tbody=table.**firstElementChild**;  
  197.         **var** trs=tbody.**children**;  
  199.         **if**(cCheckbox.**checked**)\{  
  200.             **for**(**var** i=0;i<trs.**length**;i\++)\{  
  201.                 trs\[i\].**firstElementChild**.**nextElementSibling**.**firstElementChild**.**checked**=**true**;  
  202.             \}  
  203.         \}**else**\{  
  204.             **for**(**var** i=0;i<trs.**length**;i\++)\{  
  205.                 trs\[i\].**firstElementChild**.**nextElementSibling**.**firstElementChild**.**checked**=**false**;  
  206.             \}  
  207.         \}  
  208.     \}  
  210.     *//查询  
  211.    * **function** *search*()\{  
  213.         **var** sNo=**document**.getElementById(**"sNo"**).**value**;  
  214.         **var** sName=**document**.getElementById(**"sName"**).**value**;  
  215.         **var** select=**document**.getElementById(**"select"**).**value**;  
  217.         **var** customerInfo=**localStorage**.**customerInfo**;  
  218.         **var** customerInfoArray=eval(**"("**\+customerInfo\+**")"**);  
  219.         **var** temCustomerInfoArray=\[\];  
  221.         **for**(**var** i=0;i<customerInfoArray.**length**;i\++)\{  
  222.             **if**(sNo)\{  
  223.                 **if**(sName)\{  
  224.                     **if**((customerInfoArray\[i\].**cNo**==sNo)&&(customerInfoArray\[i\].**cName**.split(sName).**length**>1))\{  
  225.                         temCustomerInfoArray.push(customerInfoArray\[i\]);  
  226.                     \}  
  227.                 \}**else**\{  
  228.                     **if**(customerInfoArray\[i\].**cNo**==sNo)\{  
  229.                         temCustomerInfoArray.push(customerInfoArray\[i\]);  
  230.                     \}  
  231.                 \}  
  232.             \}**else if**(sName)\{  
  233.                 **if** (customerInfoArray\[i\].**cName**.split(sName).**length**>1)\{  
  234.                     temCustomerInfoArray.push(customerInfoArray\[i\]);  
  235.                 \}  
  236.             \}**else**\{  
  237.                 temCustomerInfoArray=customerInfoArray;  
  238.             \}  
  239.         \}  
  241.         **if**(select!=0)\{  
  242.             **var** mNewArray=temCustomerInfoArray;  
  243.             **for**(**var** i=0;i<mNewArray.**length**;i\++)\{  
  244.                 **if**(mNewArray\[i\])\{  
  245.                     **if**(mNewArray\[i\].**cStars**!=select)\{  
  246.                         mNewArray\[i\]=**""**;  
  247.                     \}  
  248.                 \}  
  249.             \}  
  250.             temCustomerInfoArray=\[\];  
  252.             **for**(**var** i=0,j=0;i<mNewArray.**length**;i\++)\{  
  253.                 **if**(mNewArray\[i\]!=**""**)\{  
  254.                     temCustomerInfoArray\[j\++\]=mNewArray\[i\];  
  255.                 \}  
  256.             \}  
  257.         \}  
  259.         *ifPage*(temCustomerInfoArray,**true**);  
  260.     \}  
  263.     *//页数管理  
  264.    * **function** *pageControl*(index)\{  
  265.         *load*(***loadCustomerInfoArray***\[index\]);  
  266.     \}  
  268.     *//翻页  
  269.    * **function** *flip*(id)\{  
  270.         **switch** (id)\{  
  271.             **case** 0:  
  272.                 **if**(***index***>=1)\{  
  273.                     ***index***\--;  
  274.                     *load*(***loadCustomerInfoArray***\[***index***\]);  
  275.                 \}  
  276.                 **break**;  
  277.             **case** 1:  
  278.                 **if**(***index***<***pageNumber***\-1)\{  
  279.                     ***index***\++;  
  280.                     *load*(***loadCustomerInfoArray***\[***index***\]);  
  281.                 \}  
  282.                 **break**;  
  283.         \}  
  285.         **document**.getElementsByClassName(**"pageNumber"**)\[0\].**innerHTML**=**"第"**\+(***index***\+1)+**"/"**\+***pageNumber***\+**"页"**;  
  286.     \}  
  290.     **var *myX***=0;  
  291.     **var *myY***=0;  
  292.     **var *go***=**false**;  
  293.     **var *addUser***;  
  294.     **var *offsetx***=0;  
  295.     **var *offsety***=0;  
  297.     **document**.onmousemove=**function**(e)\{  
  298.         **var** cont=**document**.getElementById(**"cont"**);  
  300.         ***myX***= e.**clientX**;  
  301.         ***myY***= e.**clientY**;  
  302.         **if**(***go***)\{  
  303.             ***addUser***.**style**.**left**=***myX***\-***offsetx***\+**"px"**;  
  304.             ***addUser***.**style**.**top**=***myY***\-***offsety***\+**"px"**;  
  306.             *//限定位置  
  307.            * **if**(parseFloat(***addUser***.**style**.**left**)<0)***addUser***.**style**.**left**=0\+**"px"**;  
  308.             **if**(parseFloat(***addUser***.**style**.**top**)<0)***addUser***.**style**.**top**=0\+**"px"**;  
  309.             **if**(parseFloat(parseFloat(***addUser***.**style**.**left**)+***addUser***.**offsetWidth**)>cont.**offsetWidth**)\{  
  310.                 ***addUser***.**style**.**left**=cont.**offsetWidth**\-***addUser***.**offsetWidth**\+**"px"**;  
  311.             \}  
  312.             **if**(parseFloat(parseFloat(***addUser***.**style**.**top**)+***addUser***.**offsetHeight**)>cont.**offsetHeight**\-30)\{  
  313.                 ***addUser***.**style**.**top**=cont.**offsetHeight**\-***addUser***.**offsetHeight**\-30\+**"px"**;  
  314.             \}  
  315.         \}  
  316.     \};  
  318.     **document**.onmouseup=**function**()\{  
  319.         ***go***=**false**;  
  320.     \};  
  323.     **window**.onload=**function**()\{  
  324.         ***addUser***=**document**.getElementById(**"addUser"**);  
  325.         **var** addUserTop=**document**.getElementById(**"addUserTop"**);  
  327.         *initCustomerInfo*();  
  329.         *//鼠标按下  
  330.        * ***addUser***.onmousedown=**function**(e)\{  
  331.             **if**(e.**target**==addUserTop)\{  
  332.                 ***go***=**true**;  
  333.                 ***offsetx***= e.**offsetX**;  
  334.                 ***offsety***= e.**offsetY**;  
  335.             \}  
  336.         \};  
  337.         *//失去焦点  
  338.        * ***addUser***.onblur=**function**()\{  
  339.             ***go***=**false**;  
  340.         \};  
  341.     \};  
  342. </**script**>

发表评论

表情：
评论列表 （有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JavaScript（JS）网页--tab栏制作

    JS网页–tab栏制作 在网页的制作中，通常会使用到tab栏，例如淘宝，商品详情，规格参数和累计评价三个栏，点击不同的栏下面出现的内容不同。在这样的设计中，JS可以做到。

    桃扇骨桃扇骨/ 0 赞/ 265 阅读

    相关 js制作简单计算器

    在学校学习过程中，老师总是让我们做各种各样小案例(demo)。但是我们在做的过程，总会遇到一些问题，会使我们绞尽脑汁。那让我们一起来看看这个案例吧！ 先看看效果 ![在

    电玩女神电玩女神/ 0 赞/ 305 阅读