03 JavaScript的使用

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>&nbsp;&nbsp;
 87             <a href="">电脑办公</a>&nbsp;&nbsp;
 88             <a href="">手机数码</a>&nbsp;&nbsp;
 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>&nbsp;&nbsp;
110             <a href="">电脑办公</a>&nbsp;&nbsp;
111             <a href="">手机数码</a>&nbsp;&nbsp;
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>

相关阅读:
hdu 6435 Problem J. CSGO 最长曼哈顿距离+二进制枚举
 UVA11419 SAM I AM 二分图最小点覆盖
 数论入门基础整理
 [算法导论]#1 摊还分析
 [转载]markown语法
 [AC自动机]玄武密码
 [学习笔记]AC自动机
 分火腿
 [学习笔记]二分与分治
 [学习笔记]二项式反演
原文地址：https://www.cnblogs.com/youngao/p/9905478.html