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;width: 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="width: 100%;border: 1px solid blue;"> 104 <div style="width: 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="width: 84%;height: 460px;border: 1px solid blue;float: left;"> 108 <div> 109 <div style="border: 1px solid blue;width: 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;width: 16%;float: left;height: 228px;"> 113 <img src="../01静态界面/img/small03.jpg" /> 114 </div> 115 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 116 <img src="../01静态界面/img/small03.jpg" /> 117 </div> 118 <div style="border: 1px solid blue;width: 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;width: 16%;float: left;height: 228px;"> 124 <img src="../01静态界面/img/small03.jpg" /> 125 </div> 126 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 127 <img src="../01静态界面/img/small03.jpg" /> 128 </div> 129 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 130 <img src="../01静态界面/img/small03.jpg" /> 131 </div> 132 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 133 <img src="../01静态界面/img/small03.jpg" /> 134 </div> 135 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 136 <img src="../01静态界面/img/small03.jpg" /> 137 </div> 138 <div style="border: 1px solid blue;width: 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="width: 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="width: 100%;border: 1px solid blue;"> 159 <div style="width: 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="width: 84%;height: 460px;border: 1px solid blue;float: left;"> 163 <div> 164 <div style="border: 1px solid blue;width: 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;width: 16%;float: left;height: 228px;"> 168 <img src="../01静态界面/img/small03.jpg" /> 169 </div> 170 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 171 <img src="../01静态界面/img/small03.jpg" /> 172 </div> 173 <div style="border: 1px solid blue;width: 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;width: 16%;float: left;height: 228px;"> 179 <img src="../01静态界面/img/small03.jpg" /> 180 </div> 181 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 182 <img src="../01静态界面/img/small03.jpg" /> 183 </div> 184 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 185 <img src="../01静态界面/img/small03.jpg" /> 186 </div> 187 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 188 <img src="../01静态界面/img/small03.jpg" /> 189 </div> 190 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 191 <img src="../01静态界面/img/small03.jpg" /> 192 </div> 193 <div style="border: 1px solid blue;width: 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="width: 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="width: 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%" />