1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 table{
9 border: 1px solid;
10 width: 500px;
11 margin-left: 30%;
12 }
13
14 td,th{
15 text-align: center;
16 border: 1px solid;
17 }
18 div{
19 margin-top: 10px;
20 margin-left: 30%;
21 }
22
23 .out{
24 background-color: white;
25 }
26 .over{
27 background-color: pink;
28 }
29 </style>
30
31 <script>
32 //在页面加载完后绑定事件
33 window.onload = function () {
34 //给全选按钮绑定事件
35 document.getElementById("selectAll").onclick = function () {
36 var cbs = document.getElementsByName("cb");
37 for (var i=0; i<cbs.length; i++){
38 cbs[i].checked = true;
39 }
40 };
41 //给全不选按钮绑定事件
42 document.getElementById("unSelectAll").onclick = function () {
43 var cbs = document.getElementsByName("cb");
44 for (var i=0; i<cbs.length; i++){
45 cbs[i].checked = false;
46 }
47 };
48 //给反选按钮绑定事件
49 document.getElementById("selectRev").onclick = function () {
50 var cbs = document.getElementsByName("cb");
51 for (var i=0; i<cbs.length; i++){
52 /*if (cbs[i].checked == true) {
53 cbs[i].checked = false;
54 }else {
55 cbs[i].checked = true;
56 }*/
57 cbs[i].checked = !cbs[i].checked;
58 }
59 };
60 //给第一个复选框（全选功能）绑定事件
61 document.getElementById("firstCb").onclick = function () {
62 // alert(this); //[object HTMLInputElement] 即代表firstCb第一个复选框本身
63 var cbs = document.getElementsByName("cb");
64 for (var i=0; i<cbs.length; i++){
65 cbs[i].checked = this.checked; //设置每一个cb的状态和第一个cb的状态一样
66 }
67 };
68
69 //给所有tr绑定鼠标移至和移出事件
70 var trs = document.getElementsByTagName("tr");
71 for (var i=0; i<trs.length; i++){
72 trs[i].onmouseover = function () {
73 this.className = "over";
74 };
75 trs[i].onmouseleave = function () {
76 this.className = "out";
77 };
78 }
79 }
80 </script>
81 </head>
82 <body>
83
84 <table>
85 <caption>学生信息表</caption>
86 <tr>
87 <th><input type="checkbox" name="cb" id="firstCb"></th>
88 <th>编号</th>
89 <th>姓名</th>
90 <th>性别</th>
91 <th>操作</th>
92 </tr>
93 <tr>
94 <td><input type="checkbox" name="cb" ></td>
95 <td>1</td>
96 <td>令狐冲</td>
97 <td>男</td>
98 <td><a href="javascript:void(0);">删除</a></td>
99 </tr>
100 <tr>
101 <td><input type="checkbox" name="cb" ></td>
102 <td>2</td>
103 <td>任我行</td>
104 <td>男</td>
105 <td><a href="javascript:void(0);">删除</a></td>
106 </tr>
107 <tr>
108 <td><input type="checkbox" name="cb" ></td>
109 <td>3</td>
110 <td>岳不群</td>
111 <td>?</td>
112 <td><a href="javascript:void(0);">删除</a></td>
113 </tr>
114 </table>
115
116 <div>
117 <input type="button" id="selectAll" value="全选">
118 <input type="button" id="unSelectAll" value="全不选">
119 <input type="button" id="selectRev" value="反选">
120 </div>
121
122 </body>
123 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 *{
9 margin: 0px;
10 padding: 0px;
11 box-sizing: border-box;
12 }
13 body{
14 background: url("../img/register_bg.png") no-repeat center;
15 }
16 .rg_layout{
17 width: 900px;
18 height: 500px;
19 border: 10px solid #EEEEEE;
20 background-color: white;
21 margin: auto;
22 padding: 15px;
23 margin-top: 20px;
24 }
25 .rg_left{
26 float: left;
27 margin: 15px;
28 }
29 .rg_left > p:first-child{
30 color: #FFD026;
31 font-size: 20px;
32 }
33 .rg_left > p:last-child{
34 color: #A6A6A6;
35 font-size: 20px;
36 }
37 .rg_center{
38 float: left;
39 width: 450px;
40 }
41 .td_left{
42 width: 100px;
43 text-align: right;
44 height: 45px;
45 }
46 .td_right{
47 padding-left: 5px;
48 }
49 #username,#password,#email,#name,#tel,#birthday,#checkcode{
50 width: 251px;
51 height: 32px;
52 border: 1px solid grey;
53 border-radius: 5px;
54 padding-left: 10px;
55 }
56 #checkcode{
57 width: 110px;
58 }
59 #img_check{
60 height: 30px;
61 vertical-align: middle;
62 }
63 #btn_sub{
64 width: 150px;
65 height: 40px;
66 background-color: yellow;
67 border: 1px solid yellow;
68 }
69 .rg_right{
70 float: right;
71 margin: 15px;
72 }
73 .rg_right > p:first-child{
74 font-size: 15px;
75 }
76 .rg_right p a{
77 color: pink;
78 }
79
80 .error{
81 color: red;
82 }
83 #td_sub{
84 padding-left: 150px;
85 }
86 </style>
87
88 <script>
89 /*
90 分析：
91 1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
92 如果都为true，则监听器方法返回true
93 如果有一个为false，则监听器方法返回false
94 2.定义一些方法分别校验各个表单项。
95 3.给各个表单项绑定onblur事件。
96 */
97
98 window.onload = function () {
99 document.getElementById("form").onsubmit = function () {
100 return checkUsername() && checkPassword();
101 };
102
103 //给用户名框和密码框分别绑定离焦事件
104 document.getElementById("username").onblur = checkUsername; //放函数对象即可，不要写带括号的方法名
105 document.getElementById("password").onblur = checkPassword;
106 };
107
108 function checkUsername() {
109 //1.获取用户名的值
110 var username = document.getElementById("username").value;
111 //2.定义正则表达式
112 var reg_username = /^\w{6,12}$/;
113 //3.判断值是否符合正则的规则
114 var flag = reg_username.test(username);
115 //4.提示信息
116 var s_username = document.getElementById("s_username");
117 if (flag){
118 s_username.innerHTML = "<img src='../img/gou.png' width='35' height='25'>";
119 } else {
120 s_username.innerHTML = "用户名格式有误";
121 }
122 return flag;
123 }
124
125 function checkPassword() {
126 //1.获取密码的值
127 var password = document.getElementById("password").value;
128 //2.定义正则表达式
129 var reg_password = /^\w{6,12}$/;
130 //3.判断值是否符合正则的规则
131 var flag = reg_password.test(password);
132 //4.提示信息
133 var s_password = document.getElementById("s_password");
134 if (flag){
135 s_password.innerHTML = "<img src='../img/gou.png' width='35' height='25'>";
136 } else {
137 s_password.innerHTML = "密码格式有误";
138 }
139 return flag;
140 }
141 </script>
142 </head>
143 <body>
144
145 <div class="rg_layout">
146 <div class="rg_left">
147 <p>新用户注册</p>
148 <p>USER REGISTER</p>
149 </div>
150 <div class="rg_center">
151 <div class="rg_form">
152 <form action="#" method="get" id="form">
153 <table>
154 <tr>
155 <td class="td_left"><label for="username">用户名</label></td>
156 <td class="td_right">
157 <input type="text" name="username" id="username" placeholder="请输入用户名">
158 <span id="s_username" class="error"></span>
159 </td>
160 </tr>
161 <tr>
162 <td class="td_left"><label for="password">密码</label></td>
163 <td class="td_right">
164 <input type="password" name="password" id="password" placeholder="请输入密码">
165 <span id="s_password" class="error"></span>
166 </td>
167 </tr>
168 <tr>
169 <td class="td_left"><label for="email">邮箱</label></td>
170 <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
171 </tr>
172 <tr>
173 <td class="td_left"><label for="name">姓名</label></td>
174 <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
175 </tr>
176 <tr>
177 <td class="td_left"><label for="tel">手机号</label></td>
178 <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
179 </tr>
180 <tr>
181 <td class="td_left"><label>性别</label></td>
182 <td class="td_right">
183 <input type="radio" name="gender" value="male" checked="checked">男 <!--默认值-->
184 <input type="radio" name="gender" value="female">女
185 </td>
186 </tr>
187 <tr>
188 <td class="td_left"><label for="birthday">生日</label></td>
189 <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
190 </tr>
191 <tr>
192 <td class="td_left"><label for="checkcode">验证码</label></td>
193 <td class="td_right">
194 <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
195 <img id="img_check" src="../img/verify_code.jpg">
196 </td>
197 </tr>
198 <tr>
199 <td colspan="2" id="td_sub"><input type="submit" value="注册" id="btn_sub"></td>
200 </tr>
201 </table>
202 </form>
203 </div>
204 </div>
205 <div class="rg_right">
206 <p>已有账号?<a href="#">立即登录</a></p>
207 </div>
208 </div>
209
210 </body>
211 </html>
