jquery--实例-幻灯片制作+ajax数据请求+表单验证

 

 1 /* 把标签默认的间距设为0 */
 2 body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}
 3 
 4 /* 让h标签文字大小继承body的文字设置 */
 5 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
 6 
 7 /* 去掉列表默认的图标 */
 8 ul,ol{list-style:none;}
 9 
10 /* 去掉em默认的斜体 */
11 em{font-style: normal;}
12 
13 /* 去掉a标签默认的下划线 */
14 a{text-decoration:none;}
15 
16 
17 /* 去掉加链接时产生的框线 */
18 img{border:0;}
19 
20 /* 清除浮动 */
21 .clearfix:before,.clearfix:after{content:"";display:table}
22 .clearfix:after{clear:both;}
23 .clearfix{zoom:1}
24 
25 /* 浮动 */
26 .fl{float:left}
27 .fr{float:right}
reset.css

 

  1 body{font-family:'Microsoft Yahei';font-size:12px;color:#666;}
  2 html,body{height:100%}
  3 /* 顶部样式 */
  4 .header_con{
  5     background-color:#f7f7f7;
  6     height:29px;
  7     border-bottom:1px solid #dddddd
  8 }
  9 
 10 .header{
 11     width:1200px;
 12     height:29px;
 13     margin:0 auto;
 14 }
 15 
 16 .welcome,.login_info,.login_btn,.user_link{
 17     line-height:29px;
 18 }
 19 
 20 .login_info{
 21     display:none;
 22 }
 23 
 24 .login_info em{color:#ff8800}
 25 
 26 .login_btn a,.user_link a{
 27     color:#666;
 28 }
 29 
 30 .login_btn a:hover,.user_link a:hover{
 31     color:#ff8800;
 32 }
 33 
 34 .login_btn span,.user_link span{
 35     color:#cecece;
 36     margin:0 10px;
 37 }
 38 
 39 
 40 /* logo、搜索框、购物车样式 */
 41 
 42 .search_bar{width:1200px;height:115px;margin:0 auto;}
 43 .logo{width:150px;height:59px;margin:29px 0 0 17px;}
 44 
 45 .search_con{width:616px;height:38px;border:1px solid #37ab40;margin:34px 0 0 124px;background:url(../images/icons.png) 10px -338px no-repeat;}
 46 .search_con .input_text{width:470px;height:34px;border:0px;margin:2px 0 0 36px;outline:none;font-size:12px;color:#737272;font-family:'Microsoft Yahei'}
 47 
 48 .search_con .input_btn{
 49     width:100px;height:38px;background-color:#37ab40;border:0px;font-size:14px;color:#fff;font-family:'Microsoft Yahei';outline:none;cursor:pointer;
 50 }
 51 
 52 .guest_cart{
 53     width:200px;height:40px;margin-top:34px;
 54 }
 55 
 56 .guest_cart .cart_name{
 57     width:158px;height:38px;line-height:38px;border:1px solid #dddddd;display:block;background:url(../images/icons.png) 13px -300px no-repeat;font-size:14px;color:#37ab40;text-indent:56px;
 58 }
 59 
 60 .guest_cart .goods_count{
 61     width:40px;height:40px;text-align:center;line-height:40px;font-size:18px;
 62     font-weight:bold;color:#fff;background-color:#ff8800;
 63 }
 64 
 65 
 66 /* 菜单、幻灯片样式 */
 67 
 68 .navbar_con{height:40px;border-bottom:2px solid #39a93e}
 69 .navbar{width:1200px;margin:0 auto;}
 70 .navbar h1{width:200px;height:40px;line-height:40px;text-align: center;font-size:14px;color:#fff;background-color:#39a93e;}
 71 
 72 .navbar .subnav_con{width:200px;height:40px;background-color:#39a93e;position:relative;cursor:pointer;}
 73 
 74 .navbar .subnav_con h1{position:absolute;left:0;top:0;text-align:left;text-indent:40px}
 75 .navbar .subnav_con span{display:block;width:16px;height:9px;background:url(../images/down.png) no-repeat;position:absolute;right:27px;top:16px;transition:all 300ms ease-in;
 76 }
 77 
 78 .navbar .subnav_con:hover span{transform:rotateZ(180deg)}
 79 
 80 .navbar .subnav_con .subnav{position:absolute;left:0;top:40px;display:none;border-top:2px solid  #39a93e;}
 81 .navbar .subnav_con:hover .subnav{display:block;}
 82 
 83 
 84 .navlist{margin-left:34px;}
 85 .navlist li{height:40px;float:left;line-height:40px;}
 86 .navlist li a{color:#666;font-size:14px}
 87 .navlist li a:hover{color:#ff8800}
 88 .navlist .interval{margin:0 15px;}
 89 
 90 
 91 .center_con{width:1200px;height:270px;margin:0 auto;}
 92 .subnav{width:198px;height:270px;border-left:1px solid #eee;border-right:1px solid #eee;}
 93 .subnav li{height:44px;border-bottom:1px solid #eee;background:url(../images/icons.png) 178px -257px no-repeat #fff;}
 94 
 95 .subnav li a{display:block;height:44px;line-height:44px;text-indent:71px;font-size:14px;color:#333}
 96 .subnav li a:hover{color:#ff8800}
 97 
 98 .subnav li .fruit{background:url(../images/icons.png) 28px 0px no-repeat;}
 99 .subnav li .seafood{background:url(../images/icons.png) 28px -43px no-repeat;}
100 .subnav li .meet{background:url(../images/icons.png) 28px -86px no-repeat;}
101 .subnav li .egg{background:url(../images/icons.png) 28px -132px no-repeat;}
102 .subnav li .vegetables{background:url(../images/icons.png) 28px -174px no-repeat;}
103 .subnav li .ice{background:url(../images/icons.png) 28px -220px no-repeat;}
104 
105 
106 .slide{width:760px;height:270px;position:relative;overflow:hidden;}
107 .slide .slide_pics{position:relative;left:0;top:0;width:760px;height:270px;}
108 .slide .slide_pics li{width:760px;height:270px;position:absolute;left:0;top:0}
109 .slide .prev,.slide .next{width:17px;height:23px;background:url(../images/icons.png) left -388px no-repeat;position:absolute;left:11px;top:122px;cursor:pointer;}
110 .slide .next{background-position:left -428px;left:732px;}
111 .points{width:100%;height:11px;position:absolute;left:0;top:250px;text-align:center;}
112 .points li{display:inline-block;width:11px;height:11px;margin:0 5px;background-color:#9f9f9f;border-radius:50%;cursor:pointer;}
113 .points li.active{background-color:#cecece}
114 
115 .adv{width:240px;height:270px; overflow:hidden; background-color:gold;}
116 .adv a{display:block;float:left;}
117 
118 
119 /* 商品列表样式 */
120 
121 .list_model{width:1200px;height:340px;margin:15px auto 0;}
122 .list_title{height:40px;border-bottom:2px solid #42ad46}
123 .list_title h3{height:40px;line-height:40px;font-size:16px;color:#37ab40;font-weight:bold;}
124 .list_title .subtitle{height:20px;line-height:20px;margin-top:15px;}
125 .list_title .subtitle span{color:#666;margin:0 10px 0 20px;}
126 .list_title .subtitle a{color:#666;margin:0 5px;}
127 .list_title .subtitle a:hover,.goods_more:hover{color:#ff8800}
128 .goods_more{height:20px;margin-top:15px;color:#666}
129 
130 .goods_con{height:300px;}
131 .goods_banner{width:200px;height:300px;}
132 .goods_banner img{width:200px;height:300px;}
133 
134 .goods_list{width:1000px;height:299px;border-bottom:1px solid #ededed}
135 .goods_list li{height:299px;width:249px;border-right:1px solid #ededed;float:left}
136 .goods_list li:hover{width:248px;height:297px;border:1px solid gold;}
137 .goods_list li:hover img{opacity:0.8}
138 
139 .goods_list li h4{width:200px;height:50px;margin:20px auto 0;text-align:center;}
140 .goods_list li h4 a{font-size:14px;color:#666;font-weight:normal;line-height:24px;}
141 .goods_list li h4 a:hover{color:#ff8800}
142 
143 .goods_list li img{display:block;width:180px;height:180px;margin:0 auto;}
144 .goods_list li .prize{text-align:center;font-size:20px;color:#c40000;margin-top:5px;}
145 
146 /* 页面底部样式 */
147 .footer{
148     border-top:2px solid #42ad46;
149     margin:30px 0;
150 }
151 
152 .foot_link{text-align:center;margin-top:30px;}
153 .foot_link a,.foot_link span{color:#4e4e4e;}
154 .foot_link a:hover{color:#ff8800}
155 .foot_link span{padding:0 10px}
156 .footer p{text-align:center; margin-top:10px;}
157 
158 
159 /* 二级页面面包屑导航 */
160 .breadcrumb{
161     width:1200px;height:40px;margin:0 auto;
162 }
163 .breadcrumb a{line-height:40px;color:#37ab40}
164 .breadcrumb a:hover{color:#ff8800}
165 .breadcrumb span{line-height:40px;color:#666;padding:0 5px;}
166 
167 
168 .main_wrap{width:1200px;margin:0 auto;}
169 .l_wrap{width:200px;}
170 .r_wrap{width:980px;}
171 
172 
173 /* 新品推荐样式 */
174 
175 .new_goods{
176     border:1px solid #ededed;
177     border-top:2px solid #37ab40;
178     padding-bottom:10px;
179 }
180 
181 .new_goods h3{
182     height:33px;line-height:33px;background-color:#fcfcfc;border-bottom:1px solid #ededed;font-size:14px;font-weight:normal;text-indent:10px;
183 }
184 
185 .new_goods ul{width:160px;margin:0 auto;overflow:hidden;}
186 .new_goods li{border-bottom:1px solid #ededed;margin-bottom:-1px;}
187 .new_goods li img{display:block;width:150px;height:150px;margin:10px auto;}
188 .new_goods li h4{width:160px;margin:0 auto;}
189 .new_goods li h4 a{font-weight:normal;color:#666;display:block;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
190 .new_goods li .prize{font-size:14px;color:#da260e;margin:10px auto;}
191 
192 
193 
194 /* 商品列表样式 */
195 
196 .sort_bar{height:30px;background-color:#f0fdec}
197 .sort_bar a{display:block;height:30px;line-height:30px;padding:0 20px;float:left;color:#000}
198 .sort_bar .active{background-color:#37ab40;color:#fff;}
199 
200 
201 .goods_type_list{
202     margin:10px auto 0;
203 }
204 
205 .goods_type_list li{
206     width:196px;
207     float:left;
208     margin-bottom:10px
209 }
210 
211 .goods_type_list li img{width:160px;height:160px;display:block;margin:10px auto;}
212 .goods_type_list li h4{width:160px;margin:0 auto;}
213 .goods_type_list li h4 a{font-weight:normal;color:#666;display:block;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
214 .operate{width:160px;margin:10px auto;position:relative;}
215 .goods_type_list .operate .prize{color:#da260e; font-size:14px;} 
216 .goods_type_list .operate .unit{color:#999;padding-left:5px;}
217 .goods_type_list .operate .add_goods{display:inline-block;width:15px;height:15px;background:url(../images/shop_cart.png);position:absolute;right:0;top:3px;}
218 
219 
220 /* 分页样式 */
221 
222 .pagenation{height:32px;text-align:center;font-size:0;margin:30px auto;}
223 .pagenation a{display:inline-block;border:1px solid #d2d2d2;background-color:#f8f6f7;font-size:12px;padding:7px 10px;color:#666;margin:5px}
224 
225 .pagenation .active{background-color:#fff;color:#43a200}
226 
227 
228 /* 商品详情样式 */
229 .goods_detail_con{
230     width:1198px;
231     height:398px;
232     border:1px solid #ededed;
233     margin:0 auto 20px;
234 }
235 
236 .goods_detail_pic{width:350px;height:350px;margin:24px 0 0 24px;}
237 .goods_detail_list{
238     width:730px;height:350px;margin:24px 24px 0 0;
239 }
240 .goods_detail_list h3{font-size:24px;line-height:24px;color:#666;font-weight:normal;}
241 .goods_detail_list p{color:#666;line-height:40px;}
242 .prize_bar{height:72px;background-color:#fff5f5;line-height:72px;}
243 .prize_bar .show_pirze{font-size:20px;color:#ff3e3e;padding-left:20px}
244 .prize_bar .show_pirze em{font-style:normal;font-size:36px;padding-left:10px}
245 .prize_bar .show_unit{padding-left:150px}
246 
247 .goods_num{height:52px;margin-top:19px;}
248 .goods_num .num_name{width:70px;height:52px;line-height:52px;}
249 .goods_num .num_add{width:75px;height:50px;border:1px solid #dddddd}
250 .goods_num .num_add input{width:49px;height:50px;text-align:center;line-height:50px;border:0px;outline:none;font-size:14px;color:#666}
251 .goods_num .num_add .add,.goods_num .num_add .minus{width:25px;line-height:25px;text-align:center;border-left:1px solid #ddd;border-bottom:1px solid #ddd;color:#666;font-size:14px}
252 .goods_num .num_add .minus{border-bottom:0px}
253 
254 .total{height:35px;line-height:35px;margin-top:25px;}
255 .total em{font-style:normal;color:#ff3e3e;font-size:18px}
256 
257 .operate_btn{height:40px;margin-top:35px;font-size:0;position:relative;}
258 .operate_btn .buy_btn,.operate_btn .add_cart{display:inline-block;width:178px;height:38px;border:1px solid #c40000;font-size:14px;color:#c40000;line-height:38px;text-align:center;background-color:#ffeded;}
259 .operate_btn .add_cart{background-color:#c40000;color:#fff;margin-left:10px;position:relative;z-index:10;}
260 
261 .add_jump{width:20px;height:20px;background-color:#c40000;position:absolute;left:268px;top:10px;border-radius:50%;z-index:9;display:none;}
262 
263 .detail_tab{
264     height:35px;
265     border-bottom:1px solid #37ab40
266 }
267 
268 .detail_tab li{height:34px;line-height:34px;padding:0 30px;font-size:14px;color:#333333;float:left;border:1px solid #e8e8e8;border-bottom:0px;cursor:pointer;background-color:#faf8f8}
269 
270 .detail_tab li.active{border-top:2px solid #37ab40;position:relative;background-color:#fff;border-left:1px solid #37ab40;border-right:1px solid #37ab40;top:-1px;height:35px;}
271 
272 .tab_content dt{margin-top:10px;font-size:16px;color:#044d39}
273 .tab_content dd{line-height:24px;margin-top:5px;}
274 
275 
276 /* 登录页 */
277 
278 .login_top{width:960px;height:130px;margin:0 auto;}
279 .login_logo{display:block;width:193px;height:76px;margin-top:30px;}
280 .login_form_bg{height:480px;background-color:#518e17}
281 .no-mp{margin-top:0px;}
282 .login_form_wrap{width:960px;height:480px;margin:0 auto;}
283 .login_banner{width:381px;height:322px;background:url(../images/login_banner.png) no-repeat;margin-top:90px;}
284 .slogan{width:40px;height:300px;font-size:30px;color:#f0f9e8;text-align:center;line-height:36px;margin:80px 0 0 120px}
285 .login_form{width:368px;height:378px;border:1px solid #c6c6c5;background-color:#fff; margin-top:50px;}
286 
287 .login_title{height:60px;width:308px;margin:10px auto;border-bottom:1px solid #e0e0e0;}
288 
289 .login_title h1{font-size:24px;height:60px;line-height:60px;color:#a8a8a8;float:left;font-weight:bold;margin-left:44px;}
290 .login_title a{width:100px;height:20px;display:block;font-size:16px;color:#5fb42a;text-indent:26px;background:url(../images/icons02.png) left 5px no-repeat;float:left;margin:20px 0 0 36px}
291 
292 .form_input{width:308px;height:250px;margin:20px auto;position:relative;}
293 .name_input,.pass_input{width:306px;height:36px;border:1px solid #e0e0e0;background:url(../images/icons02.png) 280px -41px no-repeat #f8f8f8;outline:none;font-size:14px;text-indent:10px;position: absolute;left:0;top:0}
294 .pass_input{top:65px;background-position:280px -95px;}
295 
296 .user_error,.pwd_error{color:#f00;position:absolute;left:0;top:43px;display:none}
297 
298 .pwd_error{top:110px;}
299 
300 .more_input{position:absolute;left:0;top:130px;width:100%}
301 
302 .more_input input{float:left;margin-top:2px;}
303 .more_input label{float:left;margin-left:10px;}
304 .more_input a{float:right;color:#666}
305 .more_input a:hover{color:#ff8800}
306 
307 .input_submit{width:100%;height:40px;position:absolute;left:0;top:180px;background-color:#47aa34;color:#fff;font-size:22px;border:0px;font-family:'Microsoft Yahei';cursor:pointer;}
308 
309 
310 /* 注册页面 */
311 .register_con{
312     width:700px;
313     height:560px;
314     margin:50px auto 0;
315     background:url(../images/interval_line.png) 300px top no-repeat;
316 }
317 
318 .l_con{width:300px;}
319 .reg_logo{width:200px;height:76px;float:right;margin-right:30px;}
320 .reg_slogan{width:300px;height:30px;float:right;text-align:right;font-size:24px;color:#69a81e;margin:20px 30px 0 0;}
321 .reg_banner{width:251px;height:329px;background:url(../images/register_banner.png) no-repeat;float:right; margin:20px 10px 0 0;opacity:0.5}
322 
323 
324 .r_con{width:400px;}
325 .reg_title{width:360px;height:50px;float:left;margin-left:30px;border-bottom:1px solid #e0e0e0}
326 .reg_title h1{height:50px;line-height:50px;float:left;font-size:24px;color:#a8a8a8;font-weight:bold;}
327 .reg_title a{float:right;height:20px;line-height:20px;font-size:16px;color:#5fb42a;padding-right:20px;background:url(../images/icons02.png) 35px 3px no-repeat;margin-top:15px}
328 
329 .reg_form{width:360px;margin:30px 0 0 30px;float:left;position:relative;}
330 .reg_form li{height:70px;}
331 .reg_form li label{width:70px;height:40px;line-height:40px;float:left;font-size:14px;color:#a8a8a8}
332 .reg_form li input{width:288px;height:38px;border:1px solid #e0e0e0;float:left;outline:none;text-indent:10px;background-color:#f8f8f8}
333 .reg_form li.agreement input{width:15px;height:15px;float:left;margin-top:13px}
334 .reg_form li.agreement label{width:300px;float:left;margin-left:10px;}
335 .reg_form li.reg_sub input{width:360px;height:40px;background-color:#47aa34;font-size:18px;color:#fff;font-family:'Microsoft Yahei';cursor:pointer;}
336 .reg_form li .error_tip{float:left;height:30px;line-height:30px;margin-left:70px;color:#e62e2e;display:none;}
337 .reg_form li .error_tip2{float:left;height:20px;line-height:20px;color:#e62e2e;display:none;}
338 
339 
340 .sub_page_name{font-size:18px;color:#666;margin:50px 0 0 20px}
341 
342 .total_count{
343     width:1200px;margin:0 auto;height:40px;line-height:40px;font-size:14px;
344 }
345 .total_count em{
346     font-size:16px;color:#ff4200;margin:0 5px;
347 }
348 
349 .cart_list_th{width:1198px;border:1px solid #ddd;background-color:#f7f7f7;margin:0 auto;}
350 .cart_list_th li{height:40px;line-height:40px;float:left;text-align:center;}
351 .cart_list_th .col01{width:26%;}
352 .cart_list_th .col02{width:16%;}
353 .cart_list_th .col03{width:13%;}
354 .cart_list_th .col04{width:12%;}
355 .cart_list_th .col05{width:15%;}
356 .cart_list_th .col06{width:18%;}
357 
358 .cart_list_td{width:1198px;border:1px solid #ddd;background-color:#edfff9;margin:0 auto;margin-top:-1px;}
359 .cart_list_td li{height:120px;line-height:120px;float:left;text-align:center;}
360 
361 .cart_list_td .col01{width:4%;}
362 .cart_list_td .col02{width:12%;}
363 .cart_list_td .col03{width:10%;}
364 .cart_list_td .col04{width:16%;}
365 .cart_list_td .col05{width:13%;}
366 .cart_list_td .col06{width:12%;}
367 .cart_list_td .col07{width:15%;}
368 .cart_list_td .col08{width:18%;}
369 
370 .cart_list_td .col02 img{width:100px;height:100px;border:1px solid #ddd;display:block;margin:10px auto 0;}
371 .cart_list_td .col03{height:48px;text-align:left;line-height:24px;margin-top:38px;}
372 .cart_list_td .col03 em{color:#999}
373 .cart_list_td .col08 a{color:#666}
374 
375 .cart_list_td .col06 .num_add{width:98px;height:28px;border:1px solid #ddd;margin:40px auto 0;}
376 .cart_list_td .col06 .num_add a{width:29px;height:28px;line-height:28px;background-color:#f3f3f3;font-size:14px;color:#666}
377 .cart_list_td .col06 .num_add input{width:38px;height:28px;text-align:center;line-height:30px;border:0px;display:block;float:left;outline:none;border-left:1px solid #ddd;border-right:1px solid #ddd;}
378 
379 
380 .settlements{width:1198px;height:78px;border:1px solid #ddd;background-color:#fff4e8;margin:-1px auto 0;}
381 .settlements li{line-height:78px;float:left;}
382 .settlements .col01{width:4%;text-align:center}
383 .settlements .col02{width:12%;}
384 .settlements .col03{width:69%; height:48px; line-height:28px;text-align:right;margin-top:10px;}
385 .settlements .col03 span{color:#ff0000;padding-right:5px}
386 .settlements .col03 em{color:#ff3d3d;font-size:22px;font-weight:bold;}
387 .settlements .col03 span{color:#ff0000;}
388 .settlements .col03 b{color:#ff0000;font-size:14px;padding:0 5px;}
389 
390 .settlements .col04{width:14%;text-align:center;float:right;}
391 .settlements .col04 a{display:block;height:78px;background-color:#ff3d3d;text-align:center;line-height:78px;color:#fff;font-size:24px}
392 
393 
394 .common_title{width:1200px;margin:20px auto 0;font-size:14px;}
395 
396 .common_list_con{width:1200px;border:1px solid #dddddd;border-top:2px solid #00bc6f;margin:10px auto 0;background-color:#f7f7f7;position:relative;}
397 
398 .common_list_con dl{margin:20px;}
399 .common_list_con dt{font-size:14px;font-weight:bold;margin-bottom:10px}
400 .common_list_con dd input{vertical-align:bottom;margin-right:10px}
401 
402 .edit_site{position:absolute; right:20px;top:30px;width:100px;height:30px;background-color:#37ab40;text-align:center;line-height:30px;color:#fff}
403 
404 .pay_style_con{margin:20px;}
405 .pay_style_con input{float:left;margin:14px 7px 0 0;}
406 .pay_style_con label{float:left;border:1px solid #ccc;background-color:#fff;padding:10px 10px 10px 40px;margin-right:25px}
407 
408 .pay_style_con .cash{background:url(../images/pay_icons.png) 8px top no-repeat #fff;}
409 .pay_style_con .weixin{background:url(../images/pay_icons.png) 6px -36px no-repeat #fff;}
410 
411 .pay_style_con .zhifubao{background:url(../images/pay_icons.png) 12px -72px no-repeat #fff;width:50px;height:16px}
412 
413 .pay_style_con .bank{background:url(../images/pay_icons.png) 6px -108px no-repeat #fff;}
414 
415 
416 .goods_list_th{height:40px;border-bottom:1px solid #ccc}
417 .goods_list_th li{float:left;line-height:40px;text-align:center;}
418 .goods_list_th .col01{width:25%}
419 .goods_list_th .col02{width:20%}
420 .goods_list_th .col03{width:25%}
421 .goods_list_th .col04{width:15%}
422 .goods_list_th .col05{width:15%}
423 
424 .goods_list_td{height:80px;border-bottom:1px solid #eeeded}
425 .goods_list_td li{float:left;line-height:80px;text-align:center;}
426 .goods_list_td .col01{width:4%}
427 .goods_list_td .col02{width:6%}
428 .goods_list_td .col03{width:15%}
429 .goods_list_td .col04{width:20%}
430 .goods_list_td .col05{width:25%}
431 .goods_list_td .col06{width:15%}
432 .goods_list_td .col07{width:15%}
433 
434 .goods_list_td .col02{text-align:right}
435 .goods_list_td .col02 img{width:63px;height:63px;border:1px solid #ddd;display:block;margin:7px 0;float:right;}
436 .goods_list_td .col03{text-align:left;text-indent:20px}
437 
438 
439 .settle_con{margin:10px}
440 .total_goods_count,.transit,.total_pay{line-height:24px;text-align:right}
441 .total_goods_count em,.total_goods_count b,.transit b,.total_pay b{font-size:14px;color:#ff4200;padding:0 5px;}
442 
443 .order_submit{width:1200px;margin:20px auto;}
444 .order_submit a{width:160px;height:40px;line-height:40px;text-align:center;background-color:#47aa34;color:#fff;font-size:16px;display:block;float:right}
445 
446 
447 .order_list_th{width:1198px;border:1px solid #ddd;background-color:#f7f7f7;margin:20px auto 0;}
448 .order_list_th li{float:left;height:30px;line-height:30px}
449 .order_list_th .col01{width:20%;margin-left:20px}
450 .order_list_th .col02{width:20%}
451 
452 
453 .order_list_table{
454     width:1200px;
455     border-collapse:collapse;
456     border-spacing:0px;
457     border:1px solid #ddd;
458     margin:-1px auto 0;
459 }
460 
461 .order_list_table td{
462     border:1px solid #ddd;    
463     text-align:center;
464 }
465 
466 .order_goods_list{border-bottom:1px solid #ddd;margin-bottom:-2px;}
467 .order_goods_list li{float:left; height:80px;line-height:80px;}
468 .order_goods_list .col01{width:20%}
469 .order_goods_list .col01 img{width:60px;height:60px;border:1px solid #ddd;margin:10px auto;}
470 .order_goods_list .col02{width:50%;text-align:left;}
471 .order_goods_list .col02 em{color:#999;margin-left:10px}
472 .order_goods_list .col03{width:10%}
473 .order_goods_list .col04{width:20%}
474 
475 .oper_btn{display:inline-block;border:1px solid #ddd;color:#666;padding:5px 10px}
476 
477 .popup_con{display:none;}
478 .popup{width:300px;height:150px;border:1px solid #dddddd;border-top:2px solid #00bc6f;background-color:#f7f7f7;position:fixed;
479     left:50%;
480     margin-left:-150px;
481     top:50%;
482     margin-top:-75px;
483     z-index:1000;
484 }
485 
486 .popup p{height:150px;line-height:150px;text-align:center;font-size:18px;}
487 
488 .mask{width:100%;height:100%;position:fixed;left:0;top:0;background-color:#000;opacity:0.3;z-index:999;}
489 
490 
491 .main_con{
492     width:1200px;
493     margin:0 auto;
494     background:url(../images/left_bg.jpg) repeat-y;
495 }
496 
497 .left_menu_con{
498     width:200px;
499     float:left;
500 }
501 
502 .left_menu_con h3{
503     font-size:16px;
504     line-height:40px;
505     border-bottom:1px solid #ddd;
506     text-align:center;
507     margin-bottom:10px;
508 }
509 
510 .left_menu_con ul li{
511     line-height:40px;
512     text-align:center;
513     font-size:14px;
514 }
515 
516 .left_menu_con ul li a{
517     color:#666;
518 }
519 
520 .left_menu_con ul li .active{
521     color:#ff8800;
522     font-weight:bold;
523 }
524 
525 .right_content{
526     width:980px;
527     float:right;
528     min-height:500px;
529 }
530 
531 .w980{
532     width:980px;
533 }
534 
535 .w978{
536     width:978px;
537 }
538 
539 
540 .common_title2{height:20px;line-height:20px;font-size:16px;margin:10px 0;}
541 .user_info_list{
542     background-color:#f9f9f9;
543     margin:10px 0 15px;
544     padding:10px 0;
545     height:90px;
546 }
547 
548 .user_info_list li{
549     line-height:30px;
550     text-indent:30px;
551     font-size:14px;
552 }
553 
554 .user_info_list li span{
555     width:100px;
556     float:left;
557     text-align:right;
558 }
559 
560 .info_con{
561     width:980px;
562 }
563 
564 .info_l{
565     width:600px;
566     float:left;
567 }
568 
569 .info_r{
570     width:360px;
571     float:right;
572 }
573 
574 .site_con{
575     background-color:#f9f9f9;
576     padding:10px 0;
577     margin-bottom:20px;
578 }
579 
580 .site_con dt{
581     font-size:14px;
582     line-height:30px;
583     text-indent:30px;
584     font-weight:bold;
585 }
586 
587 .site_con dd{
588     font-size:14px;
589     line-height:30px;
590     text-indent:30px;
591 }
592 
593 .site_con .form_group{
594     height:40px;
595     line-height:40px;
596     margin-top:10px;
597 }
598 
599 .site_con .form_group label{
600     width:100px;
601     float:left;
602     text-align:right;
603     font-size:14px;
604     height:40px;
605     line-height:40px;
606 }
607 
608 .site_con .form_group input{
609     width:300px;
610     height:25px;
611     border:1px solid #ddd;
612     float:left;
613     outline:none;
614     margin-top:7px;
615     text-indent:10px;
616 }
617 
618 .site_con .form_group2{
619     height:90px;
620 }
621 
622 .site_area{
623     width:280px;
624     height:60px;
625     border:1px solid #ddd;
626     outline:none;
627     padding:10px;
628 }
629 .info_submit{
630     width:80px;
631     height:30px;
632     background-color:#37ab40;
633     border:0px;
634     color:#fff;
635     margin:10px 0 10px 100px;
636     cursor:pointer;
637     font-family:'Microsoft Yahei'
638 }
639 
640 .stress{
641     color:#ff8800;
642 }
main.css

 

------------------ajax数据请求------------------

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5     <title>天天生鲜-首页</title>
  6     <link rel="stylesheet" type="text/css" href="css/reset.css">
  7     <link rel="stylesheet" type="text/css" href="css/main.css">
  8     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  9     <script type="text/javascript" src="js/jquery-ui.min.js"></script>
 10     <script type="text/javascript" src="js/slide.js"></script>
 11     <script type="text/javascript">
 12         $.ajax({
 13             url: 'js/data.json',
 14             type: 'get',
 15             dataType: 'json'
 16         })
 17         .done(function(data) {
 18             if(data.code==1){
 19 
 20                 $('.login_info em').html(data.data.name);
 21                 $('.login_info').show();
 22                 $('.login_btn').hide();
 23             }
 24         })
 25         .fail(function() {
 26             alert('链接超时，请重试！');
 27         })
 28 
 29 
 30     </script>
 31 </head>
 32 <body>
 33     <div class="header_con">
 34         <div class="header">
 35             <div class="welcome fl">欢迎来到天天生鲜!</div>
 36             <div class="fr">
 37                 <div class="login_info fl">
 38                     欢迎您：<em>张 山</em>
 39                 </div>
 40                 <div class="login_btn fl">
 41                     <a href="login.html">登录</a>
 42                     <span>|</span>
 43                     <a href="register.html">注册</a>
 44                 </div>
 45                 <div class="user_link fl">
 46                     <span>|</span>
 47                     <a href="user_center_info.html">用户中心</a>
 48                     <span>|</span>
 49                     <a href="cart.html">我的购物车</a>
 50                     <span>|</span>
 51                     <a href="user_center_order.html">我的订单</a>
 52                 </div>
 53             </div>
 54         </div>        
 55     </div>
 56 
 57     <div class="search_bar clearfix">
 58         <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
 59         <div class="search_con fl">
 60             <input type="text" class="input_text fl" name="" placeholder="搜索商品">
 61             <input type="button" class="input_btn fr" name="" value="搜索">
 62         </div>
 63         <div class="guest_cart fr">
 64             <a href="#" class="cart_name fl">我的购物车</a>
 65             <div class="goods_count fl" id="show_count">1</div>
 66         </div>
 67     </div>
 68 
 69     <div class="navbar_con">
 70         <div class="navbar">
 71             <h1 class="fl">全部商品分类</h1>
 72             <ul class="navlist fl">
 73                 <li><a href="">首页</a></li>
 74                 <li class="interval">|</li>
 75                 <li><a href="">手机生鲜</a></li>
 76                 <li class="interval">|</li>
 77                 <li><a href="">抽奖</a></li>
 78             </ul>
 79         </div>
 80     </div>
 81 
 82     <div class="center_con clearfix">
 83         <ul class="subnav fl">
 84             <li><a href="#model01" class="fruit">新鲜水果</a></li>
 85             <li><a href="#model02" class="seafood">海鲜水产</a></li>
 86             <li><a href="#model03" class="meet">猪牛羊肉</a></li>
 87             <li><a href="#model04" class="egg">禽类蛋品</a></li>
 88             <li><a href="#model05" class="vegetables">新鲜蔬菜</a></li>
 89             <li><a href="#model06" class="ice">速冻食品</a></li>
 90         </ul>
 91         <div class="slide fl">
 92             <ul class="slide_pics">
 93                 <li><img src="images/slide.jpg" alt="幻灯片"></li>
 94                 <li><img src="images/slide02.jpg" alt="幻灯片"></li>
 95                 <li><img src="images/slide03.jpg" alt="幻灯片"></li>
 96                 <li><img src="images/slide04.jpg" alt="幻灯片"></li>
 97             </ul>
 98             <div class="prev"></div>
 99             <div class="next"></div>
100             <ul class="points">
101                 
102             </ul>
103         </div>
104         <div class="adv fl">
105             <a href="#"><img src="images/adv01.jpg"></a>
106             <a href="#"><img src="images/adv02.jpg"></a>
107         </div>
108     </div>
109 
110     <div class="list_model">
111         <div class="list_title clearfix">
112             <h3 class="fl" id="model01">新鲜水果</h3>
113             <div class="subtitle fl">
114                 <span>|</span>
115                 <a href="#">鲜芒</a>
116                 <a href="#">加州提子</a>
117                 <a href="#">亚马逊牛油果</a>
118             </div>
119             <a href="#" class="goods_more fr" id="fruit_more">查看更多 ></a>
120         </div>
121 
122         <div class="goods_con clearfix">
123             <div class="goods_banner fl"><img src="images/banner01.jpg"></div>
124             <ul class="goods_list fl">
125                 <li>
126                     <h4><a href="#">草莓</a></h4>
127                     <a href="#"><img src="images/goods/goods003.jpg"></a>
128                     <div class="prize">¥ 30.00</div>
129                 </li>
130                 <li>
131                     <h4><a href="#">葡萄</a></h4>
132                     <a href="#"><img src="images/goods/goods002.jpg"></a>
133                     <div class="prize">¥ 5.50</div>
134                 </li>
135                 <li>
136                     <h4><a href="#">柠檬</a></h4>
137                     <a href="#"><img src="images/goods/goods001.jpg"></a>
138                     <div class="prize">¥ 3.90</div>
139                 </li>
140                 <li>
141                     <h4><a href="#">奇异果</a></h4>
142                     <a href="#"><img src="images/goods/goods012.jpg"></a>
143                     <div class="prize">¥ 25.80</div>
144                 </li>
145             </ul>
146         </div>
147     </div>
148 
149     <div class="list_model">
150         <div class="list_title clearfix">
151             <h3 class="fl" id="model02">海鲜水产</h3>
152             <div class="subtitle fl">
153                 <span>|</span>
154                 <a href="#">河虾</a>
155                 <a href="#">扇贝</a>                
156             </div>
157             <a href="#" class="goods_more fr">查看更多 ></a>
158         </div>
159 
160         <div class="goods_con clearfix">
161             <div class="goods_banner fl"><img src="images/banner02.jpg"></div>
162             <ul class="goods_list fl">
163                 <li>
164                     <h4><a href="#">青岛野生海捕大青虾</a></h4>
165                     <a href="#"><img src="images/goods/goods018.jpg"></a>
166                     <div class="prize">¥ 48.00</div>
167                 </li>
168                 <li>
169                     <h4><a href="#">扇贝</a></h4>
170                     <a href="#"><img src="images/goods/goods019.jpg"></a>
171                     <div class="prize">¥ 46.00</div>
172                 </li>
173                 <li>
174                     <h4><a href="#">冷冻秋刀鱼</a></h4>
175                     <a href="#"><img src="images/goods/goods020.jpg"></a>
176                     <div class="prize">¥ 19.00</div>
177                 </li>
178                 <li>
179                     <h4><a href="#">基围虾</a></h4>
180                     <a href="#"><img src="images/goods/goods021.jpg"></a>
181                     <div class="prize">¥ 25.00</div>
182                 </li>
183             </ul>
184         </div>
185     </div>
186 
187     <div class="list_model">
188         <div class="list_title clearfix">
189             <h3 class="fl" id="model03">猪牛羊肉</h3>
190             <div class="subtitle fl">
191                 <span>|</span>
192                 <a href="#">鲜芒</a>
193                 <a href="#">加州提子</a>
194                 <a href="#">亚马逊牛油果</a>
195             </div>
196             <a href="#" class="goods_more fr">查看更多 ></a>
197         </div>
198 
199         <div class="goods_con clearfix">
200             <div class="goods_banner fl"><img src="images/banner03.jpg"></div>
201             <ul class="goods_list fl">
202                 <li>
203                     <h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
204                     <a href="#"><img src="images/goods.jpg"></a>
205                     <div class="prize">¥ 38.00</div>
206                 </li>
207                 <li>
208                     <h4><a href="#">维多利亚葡萄</a></h4>
209                     <a href="#"><img src="images/goods.jpg"></a>
210                     <div class="prize">¥ 38.00</div>
211                 </li>
212                 <li>
213                     <h4><a href="#">维多利亚葡萄</a></h4>
214                     <a href="#"><img src="images/goods.jpg"></a>
215                     <div class="prize">¥ 38.00</div>
216                 </li>
217                 <li>
218                     <h4><a href="#">维多利亚葡萄</a></h4>
219                     <a href="#"><img src="images/goods.jpg"></a>
220                     <div class="prize">¥ 38.00</div>
221                 </li>
222             </ul>
223         </div>
224     </div>
225 
226     <div class="list_model">
227         <div class="list_title clearfix">
228             <h3 class="fl" id="model04">禽类蛋品</h3>
229             <div class="subtitle fl">
230                 <span>|</span>
231                 <a href="#">鲜芒</a>
232                 <a href="#">加州提子</a>
233                 <a href="#">亚马逊牛油果</a>
234             </div>
235             <a href="#" class="goods_more fr">查看更多 ></a>
236         </div>
237 
238         <div class="goods_con clearfix">
239             <div class="goods_banner fl"><img src="images/banner04.jpg"></div>
240             <ul class="goods_list fl">
241                 <li>
242                     <h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
243                     <a href="#"><img src="images/goods.jpg"></a>
244                     <div class="prize">¥ 38.00</div>
245                 </li>
246                 <li>
247                     <h4><a href="#">维多利亚葡萄</a></h4>
248                     <a href="#"><img src="images/goods.jpg"></a>
249                     <div class="prize">¥ 38.00</div>
250                 </li>
251                 <li>
252                     <h4><a href="#">维多利亚葡萄</a></h4>
253                     <a href="#"><img src="images/goods.jpg"></a>
254                     <div class="prize">¥ 38.00</div>
255                 </li>
256                 <li>
257                     <h4><a href="#">维多利亚葡萄</a></h4>
258                     <a href="#"><img src="images/goods.jpg"></a>
259                     <div class="prize">¥ 38.00</div>
260                 </li>
261             </ul>
262         </div>
263     </div>
264 
265     <div class="list_model">
266         <div class="list_title clearfix">
267             <h3 class="fl" id="model05">新鲜蔬菜</h3>
268             <div class="subtitle fl">
269                 <span>|</span>
270                 <a href="#">鲜芒</a>
271                 <a href="#">加州提子</a>
272                 <a href="#">亚马逊牛油果</a>
273             </div>
274             <a href="#" class="goods_more fr">查看更多 ></a>
275         </div>
276 
277         <div class="goods_con clearfix">
278             <div class="goods_banner fl"><img src="images/banner05.jpg"></div>
279             <ul class="goods_list fl">
280                 <li>
281                     <h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
282                     <a href="#"><img src="images/goods.jpg"></a>
283                     <div class="prize">¥ 38.00</div>
284                 </li>
285                 <li>
286                     <h4><a href="#">维多利亚葡萄</a></h4>
287                     <a href="#"><img src="images/goods.jpg"></a>
288                     <div class="prize">¥ 38.00</div>
289                 </li>
290                 <li>
291                     <h4><a href="#">维多利亚葡萄</a></h4>
292                     <a href="#"><img src="images/goods.jpg"></a>
293                     <div class="prize">¥ 38.00</div>
294                 </li>
295                 <li>
296                     <h4><a href="#">维多利亚葡萄</a></h4>
297                     <a href="#"><img src="images/goods.jpg"></a>
298                     <div class="prize">¥ 38.00</div>
299                 </li>
300             </ul>
301         </div>
302     </div>
303 
304     <div class="list_model">
305         <div class="list_title clearfix">
306             <h3 class="fl" id="model06">速冻食品</h3>
307             <div class="subtitle fl">
308                 <span>|</span>
309                 <a href="#">鲜芒</a>
310                 <a href="#">加州提子</a>
311                 <a href="#">亚马逊牛油果</a>
312             </div>
313             <a href="#" class="goods_more fr">查看更多 ></a>
314         </div>
315 
316         <div class="goods_con clearfix">
317             <div class="goods_banner fl"><img src="images/banner06.jpg"></div>
318             <ul class="goods_list fl">
319                 <li>
320                     <h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
321                     <a href="#"><img src="images/goods.jpg"></a>
322                     <div class="prize">¥ 38.00</div>
323                 </li>
324                 <li>
325                     <h4><a href="#">维多利亚葡萄</a></h4>
326                     <a href="#"><img src="images/goods.jpg"></a>
327                     <div class="prize">¥ 38.00</div>
328                 </li>
329                 <li>
330                     <h4><a href="#">维多利亚葡萄</a></h4>
331                     <a href="#"><img src="images/goods.jpg"></a>
332                     <div class="prize">¥ 38.00</div>
333                 </li>
334                 <li>
335                     <h4><a href="#">维多利亚葡萄</a></h4>
336                     <a href="#"><img src="images/goods.jpg"></a>
337                     <div class="prize">¥ 38.00</div>
338                 </li>
339             </ul>
340         </div>
341     </div>
342 
343     <div class="footer">
344         <div class="foot_link">
345             <a href="#">关于我们</a>
346             <span>|</span>
347             <a href="#">联系我们</a>
348             <span>|</span>
349             <a href="#">招聘人才</a>
350             <span>|</span>
351             <a href="#">友情链接</a>        
352         </div>
353         <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
354         <p>电话：010-****888    京ICP备*******8号</p>
355     </div>
356 
357 </body>
358 </html>
index.html

 

 

 

 

-----------------幻灯片制作----------------

  1 //------slide.js------
  2 
  3 $(function(){
  4     var $li=$('.slide_pics li');
  5     var len=$li.length;
  6 
  7     //将要运动过来的li
  8     var nowli=0;
  9     //当前要离开的li
 10     var prevli=0;
 11 
 12     var $prev = $('.prev');
 13     var $next = $('.next');
 14 
 15     var timer=null;
 16 
 17     $li.not(':first').css({left:760});  //如果不是第一张幻灯片，就都往右边挪760px
 18 
 19     //动态配置幻灯片下方圆点，有多少幻灯片就有多少圆点
 20     $li.each(function(index){      //index是索引值
 21         var $sli=$('<li>');       //设置<li>标签
 22         $sli.appendTo('.points');   //添加<li>标签在.points
 23         if(index==0){
 24             $sli.addClass('active');  //默认第一个圆点的颜色
 25         }
 26     })
 27 
 28     $points=$('.points li')
 29 
 30     //按圆点进行移动
 31     $points.click(function(){
 32         nowli=$(this).index();      //不用'var' 关键字定义变量，变量变成了全局变量
 33 
 34         if(nowli==prevli){
 35             return;  //停止该函数继续
 36         }
 37 
 38         move();  //移动函数
 39         $(this).addClass('active').siblings().removeClass('active');   //改变圆点的颜色
 40     })
 41 
 42     //按左图标进行移动
 43     $prev.click(function(){
 44         nowli--;
 45         move();
 46         $points.eq(nowli).addClass('active').siblings().removeClass('active');   //改变圆点的颜色
 47     })
 48 
 49     //按右图标进行移动
 50     $next.click(function(){
 51         nowli++;
 52         move();
 53         $points.eq(nowli).addClass('active').siblings().removeClass('active');   //改变圆点的颜色
 54     })
 55 
 56     //------------设置自动播放幻灯片效果
 57 
 58     timer = setInterval(autoplay,4000);  //先设置默认播放
 59 
 60     $('.slide').mouseenter(function(){    //鼠标进入（进入子元素不触发）
 61         clearInterval(timer)
 62     })
 63     $('.slide').mouseleave(function(){   //鼠标离开（离开子元素不触发）
 64         timer = setInterval(autoplay,4000);   //离开再设置一下timer播放
 65     })
 66 
 67     function autoplay(){
 68         nowli++;
 69         move();
 70         $points.eq(nowli).addClass('active').siblings().removeClass('active');
 71     }
 72 
 73     //-------------------
 74 
 75     //移动函数
 76     function move(){
 77 
 78         //设置按左右图标移动时的极端情况
 79         if(nowli<0){
 80             nowli=len-1;
 81             prevli=0;
 82             $li.eq(nowli).css({left:-760});
 83             $li.eq(prevli).stop().animate({left:760});    //加入stop()，鼠标多次移动不会统计多次，只记录第一和最后一次
 84             $li.eq(nowli).stop().animate({left:0});
 85             prevli=nowli;
 86             return;   //停止该函数继续
 87         }
 88         if(nowli>len-1){
 89             nowli=0;
 90             prevli=len-1;
 91             $li.eq(nowli).css({left:760});
 92             $li.eq(prevli).stop().animate({left:-760});
 93             $li.eq(nowli).stop().animate({left:0});
 94             prevli=nowli;
 95             return;   //停止该函数继续
 96         }
 97 
 98         //正常情况的移动
 99         if(nowli>prevli){
100             $li.eq(nowli).css({left:760});
101             $li.eq(prevli).stop().animate({left:-760});
102         }
103         else{
104             $li.eq(nowli).css({left:-760});
105             $li.eq(prevli).stop().animate({left:760});
106         }
107         $li.eq(nowli).stop().animate({left:0});
108         prevli=nowli;
109     }
110 
111 })

 

 

 

------------------------表单验证------------------------

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>天天生鲜-注册</title>
 6     <link rel="stylesheet" type="text/css" href="css/reset.css">
 7     <link rel="stylesheet" type="text/css" href="css/main.css">
 8     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
 9     <script type="text/javascript" src="js/register.js"></script>
10 </head>
11 <body>
12     <div class="register_con">
13         <div class="l_con fl">
14             <a class="reg_logo"><img src="images/logo02.png"></a>
15             <div class="reg_slogan">足不出户  ·  新鲜每一天</div>
16             <div class="reg_banner"></div>
17         </div>
18 
19         <div class="r_con fr">
20             <div class="reg_title clearfix">
21                 <h1>用户注册</h1>
22                 <a href="#">登录</a>
23             </div>
24             <div class="reg_form clearfix">
25                 <form>
26                 <ul>
27                     <li>
28                         <label>用户名:</label>
29                         <input type="text" name="user_name" id="user_name">
30                         <span class="error_tip">提示信息</span>
31                     </li>                    
32                     <li>
33                         <label>密码:</label>
34                         <input type="password" name="pwd" id="pwd">
35                         <span class="error_tip">提示信息</span>
36                     </li>
37                     <li>
38                         <label>确认密码:</label>
39                         <input type="password" name="cpwd" id="cpwd">
40                         <span class="error_tip">提示信息</span>
41                     </li>
42                     <li>
43                         <label>邮箱:</label>
44                         <input type="text" name="email" id="email">
45                         <span class="error_tip">提示信息</span>
46                     </li>
47                     <li class="agreement">
48                         <input type="checkbox" name="allow" id="allow" checked="checked">
49                         <label>同意”天天生鲜用户使用协议“</label>
50                         <span class="error_tip2">提示信息</span>
51                     </li>
52                     <li class="reg_sub">
53                         <input type="submit" value="注 册" name="">
54                     </li>
55                 </ul>                
56                 </form>
57             </div>
58 
59         </div>
60 
61     </div>
62 
63     <div class="footer no-mp">
64         <div class="foot_link">
65             <a href="#">关于我们</a>
66             <span>|</span>
67             <a href="#">联系我们</a>
68             <span>|</span>
69             <a href="#">招聘人才</a>
70             <span>|</span>
71             <a href="#">友情链接</a>        
72         </div>
73         <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
74         <p>电话：010-****888    京ICP备*******8号</p>
75     </div>
76     
77 </body>
78 </html>
register.html

 

register.js

  1 $(function(){
  2     var error_name=false;
  3     var error_password=false;
  4     var error_check_password=false;
  5     var error_email=false;
  6     var error_check=false;
  7 
  8     $('#user_name').blur(function(){  //光标移出
  9         check_username();
 10     })
 11 
 12     $('#user_name').click(function(){
 13         $(this).next().hide()    //点击#user_name时，报错信息隐藏
 14     })
 15 
 16     $('#pwd').blur(function(){  
 17         check_password();
 18     })
 19 
 20     $('#pwd').click(function(){
 21         $(this).next().hide()
 22     })
 23 
 24     $('#cpwd').blur(function(){
 25         check_cpwd();
 26     })
 27 
 28     $('#cpwd').click(function(){
 29         $(this).next().hide()
 30     })
 31 
 32     $('#email').blur(function(){
 33         check_email();
 34     })
 35 
 36     $('#email').click(function(){
 37         $(this).next().hide()
 38     })
 39 
 40     //是否勾选协议校验
 41     $('#allow').click(function(){
 42         if($(this).is(':checked')){
 43             $(this).siblings('span').hide();
 44             error_check = false;
 45         }
 46         else{
 47             $(this).siblings('span').html('请勾选协议！');
 48             $(this).siblings('span').show();
 49             error_check = true;
 50         }
 51     })
 52 
 53     //检查用户名
 54     function check_username(){
 55         var val=$('#user_name').val()
 56         var reg=/^[\w]{5,15}$/
 57 
 58         if(val==''){      //空值判断
 59             $('#user_name').next().html('用户名不能为空！')
 60             $('#user_name').next().show();
 61             error_name=true;
 62             return
 63         }
 64 
 65         if(reg.test(val)){    //正则判断
 66             $('#user_name').next().hide();
 67             error_name=false;
 68         }
 69         else{
 70             $('#user_name').next().html('用户名是5到15个英文或数字，还可包含“_”')
 71             $('#user_name').next().show();
 72             error_name=ture;
 73         }
 74     }
 75 
 76     //检查密码
 77     function check_password(){
 78         var val=$('#pwd').val()
 79         var reg=/^[a-zA-Z0-9@\!\*\?\.\&]{6,16}$/;
 80 
 81         if(val==''){      //空值判断
 82             $('#pwd').next().html('密码不能为空！')
 83             $('#pwd').next().show();
 84             error_password=true;
 85             return
 86         }
 87 
 88         if(reg.test(val)){    //正则判断
 89             $('#pwd').next().hide();
 90             error_password=false;
 91         }
 92         else{
 93             $('#pwd').next().html('密码是6到16位字母、数字，还可包含@!*？。&.~字符')
 94             $('#pwd').next().show();
 95             error_password=true;
 96         }
 97     }
 98 
 99     //检查确认密码
100     function check_cpwd(){
101         var pwd=$('#pwd').val();
102         var cpwd=$('#cpwd').val();
103 
104         if(cpwd==pwd){
105             $('#cpwd').next().hide();
106             error_check_password=false;
107         }
108         else{
109             $('#cpwd').next().html('两次输入的密码不一致');
110             $('#cpwd').next().show();
111             error_check_password=true;
112         }
113     }
114 
115     //检查邮箱
116     function check_email(){
117         var val=$('#email').val()
118         var reg=/^[0-9a-z][\w\.\-]*@[a-z-0-9\-]+(\.[a-z]{2,3}){1,2}$/;
119 
120         if(val==''){      //空值判断
121             $('#email').next().html('邮箱不能为空！')
122             $('#email').next().show();
123             error_email=true;
124             return
125         }
126 
127         if(reg.test(val)){    //正则判断
128             $('#email').next().hide();
129             error_email=false;
130         }
131         else{
132             $('#email').next().html('你输入的邮箱格式不正确')
133             $('#email').next().show();
134             error_email=true;
135         }
136     }
137 
138     //表单提交校验
139     $('.reg_form').submit(function(){
140         check_username();
141         check_password();
142         check_cpwd();
143         check_email();
144 
145         /*
146         if(error_name==false && error_password==false && error_check_password==false && error_email==false && error_check==false){
147             return true;
148         }
149         else{
150             return false;
151         }
152         */
153 
154         if(! (error_name==false && error_password==false && error_check_password==false && error_email==false && error_check==false)){
155             return false;
156         }
157 
158     })
159 })

posted on 2019-12-28 10:08  cherry_ning  阅读(147)  评论(0)    收藏  举报

导航