js注册实现 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             
 8             
 9         </style>
10     </head>
11     <body>
12         <div align="center" >
13             姓名:<input type="text" name="stuName" id="stuName" value="姓名" onfocus="ffocus()"/>
14             年龄:<input type="text" name="age" id="age" value="年龄" onfocus="ffocus1()"/>
15             <br /><br />
16             <input type="button" value="注册" onclick="register()"/>
17             <!--
18                 作者：1767757232@qq.com
19                 时间：2017-10-22
20                 描述：
21                 
22                 <input type="button" value="显示" onclick="show()" />
23             -->
24             <input type="button" value="清空" onclick="cclear()"/>
25             <div id="tip"></div>
26             <hr color="aqua"/>
27             <br />
28             <table id="tab" frame="border" width="30%" borderclorlight="aqua" border="1">
29                 <tr><th>姓名</th><th>年龄</th></tr>                
30                 
31             </table>
32                 <div id="show"></div>
33                     <div id="show1"></div>
34                         <div id="show2"></div>
35             
36         </div>
37     </body>
38     <script type="text/javascript">
39         var stuArr=new Array(3);
40         var i=0;
41         function register(){
42             var stuName=document.getElementById("stuName").value;
43             var age=document.getElementById("age").value;
44             
45             var student={stuName:stuName,age:age};
46             stuArr[i]=student;
47             document.getElementById("tab").innerHTML=document.getElementById("tab").innerHTML+"<tr><td>"+stuArr[i].stuName+"</td><td>"+stuArr[i].age+"</td></tr>";
48             i++;
49             document.getElementById("tip").innerHTML="注册成功";
50             
51         }
52         
53         function ffocus(){
54             document.getElementById("stuName").value="";
55             document.getElementById("tip").innerHTML="";
56         }
57         function ffocus1(){
58             document.getElementById("age").value="";
59             document.getElementById("tip").innerHTML="";
60         }
61         function cclear(){
62         //    stuArr.splice(0,0);
63             stuArr.splice(0,stuArr.length);
64             
65             document.getElementById("tab").innerHTML="<tr><th>姓名</th><th>年龄</th></tr>        ";
66             
67             
68             document.getElementById("tip").innerHTML="清空成功";
69             
70         }
71     </script>
72 </html>

 

posted @ 2017-10-22 15:18  木&子  阅读(828)  评论(0)    收藏  举报