01 注册界面的校验
1 <!-- 2 作者：offline 3 时间：2018-09-05 4 描述：通常在CSS中使用类选择器，在JS中使用id选择器,两者区分开。 5 在页面跳转时要先把要跳转的页面用浏览器打开，不然页面无法跳转. 6 在测试时还发现火狐有时候无法完成跳转功能，但用360浏览器就可以完成跳转。 7 --> 8 <!DOCTYPE html> 9 <html> 10 <head> 11 <meta charset="UTF-8"> 12 <title>注册界面</title> 13 <style> 14 div{ 15 border: 1px solid blue; 16 } 17 .bodyDiv{ 18 width:90%; 19 } 20 21 .bodyDiv > div{ 22 width: 100%; 23 } 24 25 .logoDiv{ 26 width: 33%; 27 height: 50px; 28 float: left; 29 } 30 31 .clear{ 32 clear: both; 33 } 34 35 ul li{ 36 display: inline; 37 } 38 </style> 39 <script> 40 function tips(id,content){ 41 document.getElementById(id+"Span").innerHTML="<font color='red'>"+content+"</font>" 42 } 43 44 function checkForm(){ 45 //判断用户名不能为空 46 var username=document.getElementById("username").value; 47 if(username==""){ 48 document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名不能为空！</font>" 49 return false; 50 } 51 //判断密码不能为空 52 var password=document.getElementById("password").value; 53 if(password==""){ 54 document.getElementById("passwordSpan").innerHTML="<font color='red'>密码不能为空！</font>" 55 return false; 56 } 57 } 58 59 </script> 60 </head> 61 <body> 62 <!--整体的div--> 63 <div class="bodyDiv"> 64 <div> 65 <div class="logoDiv"> 66 <img src="../01静态界面/img/logo2.png" height="50" /> 67 </div> 68 <div class="logoDiv"> 69 <img src="../01静态界面/img/header.png" height="50"/> 70 </div> 71 <div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;"> 72 <a href="">登录</a> 73 <a href="">注册</a> 74 <a href="">购物车</a> 75 </div> 76 <div class="clear"></div> 77 </div> 78 </div> 79 <div style="height: 50px;background-color: black;"> 80 <ul> 81 <li>首页</li> 82 <li>首页</li> 83 <li>首页</li> 84 <li>首页</li> 85 </ul> 86 </div> 87 <div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);"> 88 <div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px; 600px;"> 89 <form action="02网站界面图片滚动.html" method="post" onsubmit="return checkForm()" > 90 <table border="0" width="100%" cellspacing="10"> 91 <tr> 92 <td>用户名</td> 93 <td><input type="text" id="username" name="username" onfocus="tips('username','用户名由数字或字母组成!')"> 94 <span id="usernameSpan"></span> 95 </td> 96 </tr> 97 <tr> 98 <td>密码</td> 99 <td><input type="password" id="password" name="password" onfocus="tips('password','密码不少于六位!')"> 100 <span id="passwordSpan"></span> 101 </td> 102 </tr> 103 <tr> 104 <td>确认密码</td> 105 <td><input type="password" id="repassword" name="repassword"></td> 106 </tr> 107 <tr> 108 <td>性别</td> 109 <td> 110 <input type="radio" name="sex" value="男">男 111 <input type="radio" name="sex" value="女">女 112 </td> 113 </tr> 114 <tr> 115 <td>籍贯</td> 116 <td> 117 <select name="province"> 118 <option>--请选择--</option> 119 </select> 120 <select name="city"> 121 <option>--请选择--</option> 122 </select> 123 </td> 124 </tr> 125 <tr> 126 <td>爱好</td> 127 <td> 128 <input type="checkbox" name="hobby" value="篮球">篮球 129 <input type="checkbox" name="hobby" value="足球">足球 130 <input type="checkbox" name="hobby" value="排球">排球 131 <input type="checkbox" name="hobby" value="羽毛球">羽毛球 132 </td> 133 </tr> 134 <tr> 135 <td>邮箱</td> 136 <td><input type="text" id="email" name="email"></td> 137 </tr> 138 <tr> 139 <td colspan="2"><input type="submit" value="注册" /> </td> 140 </tr> 141 </table> 142 </form> 143 </div> 144 </div> 145 <!--最下面的两行--> 146 <div> 147 <img src="../01静态界面/img/footer.jpg" width="100%" /> 148 </div> 149 <div> 150 <center> 151 联系我们 招贤纳士 法律声明<br /> 152 Copyright © 2005-2016 传智商城 版权所有 153 </center> 154 </div> 155 </body> 156 </html>
02 网站首页图片滚动
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网站首页</title> 6 <style> 7 #bodyDiv{ 8 border: 1px solid blue; 9 width: 90%px; 10 } 11 .logoDiv{ 12 border: 1px solid blue; 13 width: 33%; 14 float: left; 15 height: 50px; 16 } 17 .clear{ 18 clear: both; 19 } 20 #menuDiv{ 21 width: 100%; 22 height: 50px; 23 border: 1px solid blue; 24 background-color: black; 25 } 26 27 #imgDiv{ 28 width: 100%; 29 border: 1px solid blue; 30 } 31 32 .productClass{ 33 width: 100%; 34 border: 1px solid blue; 35 } 36 .contentClass{ 37 width: 100%; 38 border: 1px solid blue; 39 } 40 .contentClass font{ 41 font-size: 30px; 42 color: black; 43 } 44 45 #menuDiv a{ 46 font-size: 20px; 47 color: white; 48 } 49 <!--找到id为menuDiv中的 a元素,不知道为什么这个注释总有问题--> 50 </style> 51 <script> 52 window.onload=function(){ 53 //设置定时 54 window.setInterval("changeImg()",5000); 55 } 56 var i=1; 57 function changeImg(){ 58 i++; 59 if(i>3){ 60 i=1; 61 } 62 var img1=document.getElementById("img1"); 63 img1.src="../01静态界面/img/"+i+".jpg" 64 } 65 </script> 66 </head> 67 <body> 68 <!--整体的DIV--> 69 <div id="bodyDiv"> 70 <!--首行分为三个小块--> 71 <div class="logoDiv"> 72 <img src="../01静态界面/img/logo2.png" height="48"/> 73 </div> 74 <div class="logoDiv"> 75 <img src="../01静态界面/img/header.png" height="48" /> 76 </div> 77 <div class="logoDiv"> 78 <a href="">登录</a> 79 <a href="">注册</a> 80 <a href="">购物车</a> 81 </div> 82 <div class="clear"></div> 83 </div> 84 <!--第二行的div--> 85 <div id="menuDiv"> 86 <a href="">首页</a> 87 <a href="">电脑办公</a> 88 <a href="">手机数码</a> 89 <a href="">烟酒糖茶</a> 90 </div> 91 <!--第三行，滚动的图片--> 92 <div id="imgDiv"> 93 <img id="img1" src="../01静态界面/img/1.jpg" width="100%" /> 94 </div> 95 <!--第四行，热门商品的Div--> 96 <div class="productClass"> 97 <!--文字部分的Div--> 98 <div class="contentClass"> 99 <font>热门商品</font> 100 <img src="../01静态界面/img/title2.jpg" /> 101 </div> 102 <!--商品展示图片部分Div--> 103 <div style=" 100%;border: 1px solid blue;"> 104 <div style=" 15%;height: 460px;border: 1px solid blue;float: left;"> 105 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/> 106 </div> 107 <div style=" 84%;height: 460px;border: 1px solid blue;float: left;"> 108 <div> 109 <div style="border: 1px solid blue; 48%;float: left;height: 228px;"> 110 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" /> 111 </div> 112 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 113 <img src="../01静态界面/img/small03.jpg" /> 114 </div> 115 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 116 <img src="../01静态界面/img/small03.jpg" /> 117 </div> 118 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 119 <img src="../01静态界面/img/small03.jpg" /> 120 </div> 121 </div> 122 <div> 123 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 124 <img src="../01静态界面/img/small03.jpg" /> 125 </div> 126 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 127 <img src="../01静态界面/img/small03.jpg" /> 128 </div> 129 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 130 <img src="../01静态界面/img/small03.jpg" /> 131 </div> 132 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 133 <img src="../01静态界面/img/small03.jpg" /> 134 </div> 135 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 136 <img src="../01静态界面/img/small03.jpg" /> 137 </div> 138 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 139 <img src="../01静态界面/img/small03.jpg" /> 140 </div> 141 </div> 142 </div> 143 </div> 144 </div> 145 146 <!--广告的Div--> 147 <div style=" 100%;border: 1px solid blue;"> 148 <img src="../01静态界面/img/ad.jpg" width="100%" height="80" /> 149 </div> 150 <!--最新商品的Div--> 151 <div class="productClass"> 152 <!--文字部分的Div--> 153 <div class="contentClass"> 154 <font>最新商品</font> 155 <img src="../01静态界面/img/title2.jpg" /> 156 </div> 157 <!--商品展示图片部分Div--> 158 <div style=" 100%;border: 1px solid blue;"> 159 <div style=" 15%;height: 460px;border: 1px solid blue;float: left;"> 160 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/> 161 </div> 162 <div style=" 84%;height: 460px;border: 1px solid blue;float: left;"> 163 <div> 164 <div style="border: 1px solid blue; 48%;float: left;height: 228px;"> 165 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" /> 166 </div> 167 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 168 <img src="../01静态界面/img/small03.jpg" /> 169 </div> 170 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 171 <img src="../01静态界面/img/small03.jpg" /> 172 </div> 173 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 174 <img src="../01静态界面/img/small03.jpg" /> 175 </div> 176 </div> 177 <div> 178 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 179 <img src="../01静态界面/img/small03.jpg" /> 180 </div> 181 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 182 <img src="../01静态界面/img/small03.jpg" /> 183 </div> 184 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 185 <img src="../01静态界面/img/small03.jpg" /> 186 </div> 187 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 188 <img src="../01静态界面/img/small03.jpg" /> 189 </div> 190 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 191 <img src="../01静态界面/img/small03.jpg" /> 192 </div> 193 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 194 <img src="../01静态界面/img/small03.jpg" /> 195 </div> 196 </div> 197 </div> 198 </div> 199 </div> 200 201 <!--页脚的Div--> 202 <div style=" 100%;border: 1px solid blue;"> 203 <img src="../01静态界面/img/footer.jpg" width="100%" /> 204 </div> 205 206 <!--友情链接的Div--> 207 <div> 208 <center> 209 联系我们 招贤纳士 法律声明<br /> 210 Copyright © 2005-2016 传智商城 版权所有 211 </center> 212 </div> 213 </body> 214 </html>
03 定时广告弹出
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网站首页</title> 6 <style> 7 #bodyDiv{ 8 border: 1px solid blue; 9 width: 90%px; 10 } 11 .logoDiv{ 12 border: 1px solid blue; 13 width: 33%; 14 float: left; 15 height: 50px; 16 } 17 .clear{ 18 clear: both; 19 } 20 #menuDiv{ 21 width: 100%; 22 height: 50px; 23 border: 1px solid blue; 24 background-color: black; 25 } 26 27 #imgDiv{ 28 width: 100%; 29 border: 1px solid blue; 30 } 31 32 .productClass{ 33 width: 100%; 34 border: 1px solid blue; 35 } 36 .contentClass{ 37 width: 100%; 38 border: 1px solid blue; 39 } 40 .contentClass font{ 41 font-size: 30px; 42 color: black; 43 } 44 45 #menuDiv a{ 46 font-size: 20px; 47 color: white; 48 } 49 <!--找到id为menuDiv中的 a元素,不知道为什么这个注释总有问题--> 50 </style> 51 <script> 52 var time; 53 window.onload=function(){ 54 //设置定时 55 time=window.setInterval("show()",2000); 56 //图片的定时 57 window.setInterval("changeImg()",5000); 58 } 59 60 //图片轮播的方法 61 var i=1; 62 function changeImg(){ 63 i++; 64 if(i>3){ 65 i=1; 66 } 67 var img1=document.getElementById("img1"); 68 img1.src="../01静态界面/img/"+i+".jpg" 69 } 70 71 //显示广告的方法 72 function show(){ 73 var adDiv=document.getElementById("adDiv"); 74 adDiv.style.display="block"; 75 window.clearInterval(time); 76 time=window.setInterval("hide()",5000); 77 } 78 79 //隐藏广告的方法 80 function hide(){ 81 var adDiv=document.getElementById("adDiv"); 82 adDiv.style.display="none"; 83 window.clearInterval(time); 84 } 85 </script> 86 </head> 87 <body> 88 <!--整体的DIV--> 89 <div id="bodyDiv"> 90 <div id="adDiv" style=" 100%;display: none;"> 91 <img src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%"/> 92 </div> 93 <!--首行分为三个小块--> 94 <div class="logoDiv"> 95 <img src="../01静态界面/img/logo2.png" height="48"/> 96 </div> 97 <div class="logoDiv"> 98 <img src="../01静态界面/img/header.png" height="48" /> 99 </div> 100 <div class="logoDiv"> 101 <a href="">登录</a> 102 <a href="">注册</a> 103 <a href="">购物车</a> 104 </div> 105 <div class="clear"></div> 106 </div> 107 <!--第二行的div--> 108 <div id="menuDiv"> 109 <a href="">首页</a> 110 <a href="">电脑办公</a> 111 <a href="">手机数码</a> 112 <a href="">烟酒糖茶</a> 113 </div> 114 <!--第三行，滚动的图片--> 115 <div id="imgDiv"> 116 <img id="img1" src="../01静态界面/img/1.jpg" width="100%" /> 117 </div> 118 <!--第四行，热门商品的Div--> 119 <div class="productClass"> 120 <!--文字部分的Div--> 121 <div class="contentClass"> 122 <font>热门商品</font> 123 <img src="../01静态界面/img/title2.jpg" /> 124 </div> 125 <!--商品展示图片部分Div--> 126 <div style=" 100%;border: 1px solid blue;"> 127 <div style=" 15%;height: 460px;border: 1px solid blue;float: left;"> 128 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/> 129 </div> 130 <div style=" 84%;height: 460px;border: 1px solid blue;float: left;"> 131 <div> 132 <div style="border: 1px solid blue; 48%;float: left;height: 228px;"> 133 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" /> 134 </div> 135 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 136 <img src="../01静态界面/img/small03.jpg" /> 137 </div> 138 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 139 <img src="../01静态界面/img/small03.jpg" /> 140 </div> 141 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 142 <img src="../01静态界面/img/small03.jpg" /> 143 </div> 144 </div> 145 <div> 146 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 147 <img src="../01静态界面/img/small03.jpg" /> 148 </div> 149 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 150 <img src="../01静态界面/img/small03.jpg" /> 151 </div> 152 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 153 <img src="../01静态界面/img/small03.jpg" /> 154 </div> 155 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 156 <img src="../01静态界面/img/small03.jpg" /> 157 </div> 158 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 159 <img src="../01静态界面/img/small03.jpg" /> 160 </div> 161 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 162 <img src="../01静态界面/img/small03.jpg" /> 163 </div> 164 </div> 165 </div> 166 </div> 167 </div> 168 169 <!--广告的Div--> 170 <div style=" 100%;border: 1px solid blue;"> 171 <img src="../01静态界面/img/ad.jpg" width="100%" height="80" /> 172 </div> 173 <!--最新商品的Div--> 174 <div class="productClass"> 175 <!--文字部分的Div--> 176 <div class="contentClass"> 177 <font>最新商品</font> 178 <img src="../01静态界面/img/title2.jpg" /> 179 </div> 180 <!--商品展示图片部分Div--> 181 <div style=" 100%;border: 1px solid blue;"> 182 <div style=" 15%;height: 460px;border: 1px solid blue;float: left;"> 183 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/> 184 </div> 185 <div style=" 84%;height: 460px;border: 1px solid blue;float: left;"> 186 <div> 187 <div style="border: 1px solid blue; 48%;float: left;height: 228px;"> 188 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" /> 189 </div> 190 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 191 <img src="../01静态界面/img/small03.jpg" /> 192 </div> 193 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 194 <img src="../01静态界面/img/small03.jpg" /> 195 </div> 196 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 197 <img src="../01静态界面/img/small03.jpg" /> 198 </div> 199 </div> 200 <div> 201 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 202 <img src="../01静态界面/img/small03.jpg" /> 203 </div> 204 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 205 <img src="../01静态界面/img/small03.jpg" /> 206 </div> 207 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 208 <img src="../01静态界面/img/small03.jpg" /> 209 </div> 210 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 211 <img src="../01静态界面/img/small03.jpg" /> 212 </div> 213 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 214 <img src="../01静态界面/img/small03.jpg" /> 215 </div> 216 <div style="border: 1px solid blue; 16%;float: left;height: 228px;"> 217 <img src="../01静态界面/img/small03.jpg" /> 218 </div> 219 </div> 220 </div> 221 </div> 222 </div> 223 224 <!--页脚的Div--> 225 <div style=" 100%;border: 1px solid blue;"> 226 <img src="../01静态界面/img/footer.jpg" width="100%" /> 227 </div> 228 229 <!--友情链接的Div--> 230 <div> 231 <center> 232 联系我们 招贤纳士 法律声明<br /> 233 Copyright © 2005-2016 传智商城 版权所有 234 </center> 235 </div> 236 </body> 237 </html>
04 优化注册界面
1 <!-- 2 作者：offline 3 时间：2018-09-05 4 描述：通常在CSS中使用类选择器，在JS中使用id选择器,两者区分开。 5 在页面跳转时要先把要跳转的页面用浏览器打开，不然页面无法跳转. 6 在测试时还发现火狐有时候无法完成跳转功能，但用360浏览器就可以完成跳转。 7 --> 8 <!DOCTYPE html> 9 <html> 10 <head> 11 <meta charset="UTF-8"> 12 <title>注册界面</title> 13 <style> 14 div{ 15 border: 1px solid blue; 16 } 17 .bodyDiv{ 18 width:90%; 19 } 20 21 .bodyDiv > div{ 22 width: 100%; 23 } 24 25 .logoDiv{ 26 width: 33%; 27 height: 50px; 28 float: left; 29 } 30 31 .clear{ 32 clear: both; 33 } 34 35 ul li{ 36 display: inline; 37 } 38 </style> 39 <script> 40 function tips(id,content){ 41 document.getElementById(id+"Span").innerHTML="<font color='red'>"+content+"</font>" 42 } 43 44 function checkForm(){ 45 //判断用户名不能为空 46 var username=document.getElementById("username").value; 47 if(username==""){ 48 document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名不能为空！</font>" 49 return false; 50 } 51 //判断密码不能为空 52 var password=document.getElementById("password").value; 53 if(password==""){ 54 document.getElementById("passwordSpan").innerHTML="<font color='red'>密码不能为空！</font>" 55 return false; 56 } 57 } 58 59 </script> 60 </head> 61 <body> 62 <!--整体的div--> 63 <div class="bodyDiv"> 64 <div> 65 <div class="logoDiv"> 66 <img src="../01静态界面/img/logo2.png" height="50" /> 67 </div> 68 <div class="logoDiv"> 69 <img src="../01静态界面/img/header.png" height="50"/> 70 </div> 71 <div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;"> 72 <a href="">登录</a> 73 <a href="">注册</a> 74 <a href="">购物车</a> 75 </div> 76 <div class="clear"></div> 77 </div> 78 </div> 79 <div style="height: 50px;background-color: black;"> 80 <ul> 81 <li>首页</li> 82 <li>首页</li> 83 <li>首页</li> 84 <li>首页</li> 85 </ul> 86 </div> 87 <div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);"> 88 <div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px; 600px;"> 89 <form action="02网站界面图片滚动.html" method="post" onsubmit="return checkForm()" > 90 <table border="0" width="100%" cellspacing="10"> 91 <tr> 92 <td>用户名</td> 93 <td><input type="text" id="username" name="username" onfocus="tips('username','用户名由数字或字母组成!')"> 94 <span id="usernameSpan"></span> 95 </td> 96 </tr> 97 <tr> 98 <td>密码</td> 99 <td><input type="password" id="password" name="password" onfocus="tips('password','密码不少于六位!')"> 100 <span id="passwordSpan"></span> 101 </td> 102 </tr> 103 <tr> 104 <td>确认密码</td> 105 <td><input type="password" id="repassword" name="repassword"></td> 106 </tr> 107 <tr> 108 <td>性别</td> 109 <td> 110 <input type="radio" name="sex" value="男">男 111 <input type="radio" name="sex" value="女">女 112 </td> 113 </tr> 114 <tr> 115 <td>籍贯</td> 116 <td> 117 <select name="province"> 118 <option>--请选择--</option> 119 </select> 120 <select name="city"> 121 <option>--请选择--</option> 122 </select> 123 </td> 124 </tr> 125 <tr> 126 <td>爱好</td> 127 <td> 128 <input type="checkbox" name="hobby" value="篮球">篮球 129 <input type="checkbox" name="hobby" value="足球">足球 130 <input type="checkbox" name="hobby" value="排球">排球 131 <input type="checkbox" name="hobby" value="羽毛球">羽毛球 132 </td> 133 </tr> 134 <tr> 135 <td>邮箱</td> 136 <td><input type="text" id="email" name="email"></td> 137 </tr> 138 <tr> 139 <td colspan="2"><input type="submit" value="注册" /> </td> 140 </tr> 141 </table> 142 </form> 143 </div> 144 </div> 145 <!--最下面的两行--> 146 <div> 147 <img src="../01静态界面/img/footer.jpg" width="100%" /> 148 </div> 149 <div> 150 <center> 151 联系我们 招贤纳士 法律声明<br /> 152 Copyright © 2005-2016 传智商城 版权所有 153 </center> 154 </div> 155 </body> 156 </html>
05 对后台显示界面数据的样式增加--隔行换色
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 function changeColor(){ 8 //获得要操作的表格控制权 9 var tab1=document.getElementById("tab1"); 10 //获得表格的所有的行数 11 var count =tab1.tBodies[0].rows.length; 12 //遍历每一行,注意这里采用了tbody因此要从0开始 13 for(var i=0;i<count;i++){ 14 if(i%2==0){ 15 tab1.tBodies[0].rows[i].style.backgroundColor="brown"; //字母或数字均可以修改颜色 16 }else{ 17 tab1.tBodies[0].rows[i].style.backgroundColor="gold"; 18 } 19 } 20 } 21 22 function checkAll(){ 23 //获得复选框 24 var selectAll = document.getElementById("selectAll"); 25 //获得下面的复选框，由于名字相同因此采用名字法获得 26 var ids = document.getElementsByName("ids"); 27 if(selectAll.checked == true){ 28 //如果被选中，则修改下面的checked属性 29 for(var i=0;i<ids.length;i++){ 30 ids[i].checked = true; 31 } 32 }else{ 33 for(var i=0;i<ids.length;i++){ 34 ids[i].checked = false; 35 } 36 } 37 } 38 39 40 </script> 41 </head> 42 <body onload="changeColor()"> 43 <table id="tab1" border="1" width="80%" align="center"> 44 <!--让表格头加粗并居中显示--> 45 <thead> 46 <tr> 47 <th><input type="checkbox" id="selectAll" name="selectAll" onclick="checkAll()" /> </th> 48 <th>分类的ID</th> 49 <th>分类的名称</th> 50 <th>分类的描述</th> 51 <th>操作</td> 52 </tr> 53 </thead> 54 <tbody> 55 <tr> 56 <th><input type="checkbox" name="ids" /> </th> 57 <td>1</td> 58 <td>手机数码</td> 59 <td>手机数码</td> 60 <td><a href="">修改</a>|<a href="">删除</a></td> 61 </tr> 62 <tr> 63 <th><input type="checkbox" name="ids" /> </th> 64 <td>2</td> 65 <td>电脑办公</td> 66 <td>电脑办公</td> 67 <td><a href="">修改</a>|<a href="">删除</a></td> 68 </tr> 69 <tr> 70 <th><input type="checkbox" name="ids" /> </th> 71 <td>3</td> 72 <td>烟酒糖茶</td> 73 <td>烟酒糖茶</td> 74 <td><a href="">修改</a>|<a href="">删除</a></td> 75 </tr> 76 <tr> 77 <th><input type="checkbox" name="ids" /> </th> 78 <td>4</td> 79 <td>汽车用品</td> 80 <td>汽车用品</td> 81 <td><a href="">修改</a>|<a href="">删除</a></td> 82 </tr> 83 <tr> 84 <th><input type="checkbox" name="ids" /> </th> 85 <td>5</td> 86 <td>鞋靴箱包</td> 87 <td>鞋靴箱包</td> 88 <td><a href="">修改</a>|<a href="">删除</a></td> 89 </tr> 90 </tbody> 91 </table> 92 </body> 93 </html>
06 对后台显示界面的处理--复选
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 function changeColor(){ 8 //获得要操作的表格控制权 9 var tab1=document.getElementById("tab1"); 10 //获得表格的所有的行数 11 var count =tab1.tBodies[0].rows.length; 12 //遍历每一行,注意这里采用了tbody因此要从0开始 13 for(var i=0;i<count;i++){ 14 if(i%2==0){ 15 tab1.tBodies[0].rows[i].style.backgroundColor="brown"; //字母或数字均可以修改颜色 16 }else{ 17 tab1.tBodies[0].rows[i].style.backgroundColor="gold"; 18 } 19 } 20 } 21 22 function checkAll(){ 23 //获得复选框 24 var selectAll = document.getElementById("selectAll"); 25 //获得下面的复选框，由于名字相同因此采用名字法获得 26 var ids = document.getElementsByName("ids"); 27 if(selectAll.checked == true){ 28 //如果被选中，则修改下面的checked属性 29 for(var i=0;i<ids.length;i++){ 30 ids[i].checked = true; 31 } 32 }else{ 33 for(var i=0;i<ids.length;i++){ 34 ids[i].checked = false; 35 } 36 } 37 } 38 39 40 </script> 41 </head> 42 <body onload="changeColor()"> 43 <table id="tab1" border="1" width="80%" align="center"> 44 <!--让表格头加粗并居中显示--> 45 <thead> 46 <tr> 47 <th><input type="checkbox" id="selectAll" name="selectAll" onclick="checkAll()" /> </th> 48 <th>分类的ID</th> 49 <th>分类的名称</th> 50 <th>分类的描述</th> 51 <th>操作</td> 52 </tr> 53 </thead> 54 <tbody> 55 <tr> 56 <th><input type="checkbox" name="ids" /> </th> 57 <td>1</td> 58 <td>手机数码</td> 59 <td>手机数码</td> 60 <td><a href="">修改</a>|<a href="">删除</a></td> 61 </tr> 62 <tr> 63 <th><input type="checkbox" name="ids" /> </th> 64 <td>2</td> 65 <td>电脑办公</td> 66 <td>电脑办公</td> 67 <td><a href="">修改</a>|<a href="">删除</a></td> 68 </tr> 69 <tr> 70 <th><input type="checkbox" name="ids" /> </th> 71 <td>3</td> 72 <td>烟酒糖茶</td> 73 <td>烟酒糖茶</td> 74 <td><a href="">修改</a>|<a href="">删除</a></td> 75 </tr> 76 <tr> 77 <th><input type="checkbox" name="ids" /> </th> 78 <td>4</td> 79 <td>汽车用品</td> 80 <td>汽车用品</td> 81 <td><a href="">修改</a>|<a href="">删除</a></td> 82 </tr> 83 <tr> 84 <th><input type="checkbox" name="ids" /> </th> 85 <td>5</td> 86 <td>鞋靴箱包</td> 87 <td>鞋靴箱包</td> 88 <td><a href="">修改</a>|<a href="">删除</a></td> 89 </tr> 90 </tbody> 91 </table> 92 </body> 93 </html>
07 对注册界面的优化
1 <!-- 2 作者：offline 3 时间：2018-09-05 4 描述：通常在CSS中使用类选择器，在JS中使用id选择器,两者区分开。 5 在页面跳转时要先把要跳转的页面用浏览器打开，不然页面无法跳转. 6 在测试时还发现火狐有时候无法完成跳转功能，但用360浏览器就可以完成跳转。 7 --> 8 <!DOCTYPE html> 9 <html> 10 <head> 11 <meta charset="UTF-8"> 12 <title>注册界面</title> 13 <style> 14 div{ 15 border: 1px solid blue; 16 } 17 .bodyDiv{ 18 width:90%; 19 } 20 21 .bodyDiv > div{ 22 width: 100%; 23 } 24 25 .logoDiv{ 26 width: 33%; 27 height: 50px; 28 float: left; 29 } 30 31 .clear{ 32 clear: both; 33 } 34 35 ul li{ 36 display: inline; 37 } 38 </style> 39 <script> 40 function tips(id,content){ 41 document.getElementById(id+"Span").innerHTML="<font color='red'>"+content+"</font>" 42 } 43 44 function checkForm(){ 45 //判断用户名不能为空 46 var username=document.getElementById("username").value; 47 if(username==""){ 48 document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名不能为空！</font>" 49 return false; 50 } 51 //判断密码不能为空 52 var password=document.getElementById("password").value; 53 if(password==""){ 54 document.getElementById("passwordSpan").innerHTML="<font color='red'>密码不能为空！</font>" 55 return false; 56 } 57 } 58 59 //！！！要特别注意是采用的括号而不是大括号 60 var arrs=new Array(5);//定义一个数组，用来存放省份 61 arrs[0]=new Array("杭州市","绍兴市");//每个省份又有不同的市来对应 62 arrs[1]=new Array("南京市","苏州市"); 63 arrs[2]=new Array("武汉市","襄阳市"); 64 arrs[2]=new Array("唐山市","保定市"); 65 function changeCity(value){ 66 //alert(value);代码检测 67 68 var city=document.getElementById("city");//获得第二个列表的内容 69 70 //在每次添加前需要把列表中的内容清空 71 for(var i=city.options.length;i>0;i--){ 72 city.options[i]=null; 73 } 74 //或者直接把长度设为0 city.options.length=0; 75 76 77 78 for(var i=0;i<arrs.length;i++){ 79 if(value==i){ 80 for(var j=0;j<arrs[i].length;j++){ 81 var opEl=document.createElement("option");//创建元素 82 var textNode = document.createTextNode(arrs[i][j]);//创建一个文本节点 83 opEl.appendChild(textNode);//将文本的内容添加到option元素中 84 city.appendChild(opEl);//将option的元素添加到第二个列表中 85 } 86 } 87 } 88 } 89 90 </script> 91 </head> 92 <body> 93 <!--整体的div--> 94 <div class="bodyDiv"> 95 <div> 96 <div class="logoDiv"> 97 <img src="../01静态界面/img/logo2.png" height="50" /> 98 </div> 99 <div class="logoDiv"> 100 <img src="../01静态界面/img/header.png" height="50"/> 101 </div> 102 <div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;"> 103 <a href="">登录</a> 104 <a href="">注册</a> 105 <a href="">购物车</a> 106 </div> 107 <div class="clear"></div> 108 </div> 109 </div> 110 <div style="height: 50px;background-color: black;"> 111 <ul> 112 <li>首页</li> 113 <li>首页</li> 114 <li>首页</li> 115 <li>首页</li> 116 </ul> 117 </div> 118 <div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);"> 119 <div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px; 600px;"> 120 <form action="02网站界面图片滚动.html" method="post" onsubmit="return checkForm()" > 121 <table border="0" width="100%" cellspacing="10"> 122 <tr> 123 <td>用户名</td> 124 <td><input type="text" id="username" name="username" onfocus="tips('username','用户名由数字或字母组成!')"> 125 <span id="usernameSpan"></span> 126 </td> 127 </tr> 128 <tr> 129 <td>密码</td> 130 <td><input type="password" id="password" name="password" onfocus="tips('password','密码不少于六位!')"> 131 <span id="passwordSpan"></span> 132 </td> 133 </tr> 134 <tr> 135 <td>确认密码</td> 136 <td><input type="password" id="repassword" name="repassword"></td> 137 </tr> 138 <tr> 139 <td>性别</td> 140 <td> 141 <input type="radio" name="sex" value="男">男 142 <input type="radio" name="sex" value="女">女 143 </td> 144 </tr> 145 <tr> 146 <td>籍贯</td> 147 <td> 148 <select id="province" name="province" onchange="changeCity(this.value)"> 149 <option>--请选择--</option> 150 <option value="0">浙江省</option> 151 <option value="1">江苏省</option> 152 <option value="2">湖北省</option> 153 <option value="3">河北省</option> 154 </select> 155 <select id="city" name="city"> 156 <option>--请选择--</option> 157 </select> 158 </td> 159 </tr> 160 <tr> 161 <td>爱好</td> 162 <td> 163 <input type="checkbox" name="hobby" value="篮球">篮球 164 <input type="checkbox" name="hobby" value="足球">足球 165 <input type="checkbox" name="hobby" value="排球">排球 166 <input type="checkbox" name="hobby" value="羽毛球">羽毛球 167 </td> 168 </tr> 169 <tr> 170 <td>邮箱</td> 171 <td><input type="text" id="email" name="email"></td> 172 </tr> 173 <tr> 174 <td colspan="2"><input type="submit" value="注册" /> </td> 175 </tr> 176 </table> 177 </form> 178 </div> 179 </div> 180 <!--最下面的两行--> 181 <div> 182 <img src="../01静态界面/img/footer.jpg" width="100%" /> 183 </div> 184 <div> 185 <center> 186 联系我们 招贤纳士 法律声明<br /> 187 Copyright © 2005-2016 传智商城 版权所有 188 </center> 189 </div> 190 </body> 191 </html>