大家好，欢迎来到IT知识分享网。
说明：【案例共六个页面】
功能分析：略
一．蔚蓝网登录页面（login.html）
知识点：
1.表单验证和用户友好体验
2.jQuery验证
3.HTML5验证
jQuery表单验证源代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蔚蓝网登录页面</title> <link href="css/global.css" rel="stylesheet" /> <link href="css/layout.css" rel="stylesheet" /> <link href="css/template.css" rel="stylesheet" /> <style type="text/css"> #pwdmsg { color: red; } #emailmsg { color: red; } </style> <script src="js/jquery.js"></script> <script type="text/javascript"> function checkemail() { //获取用户输入的文本框内容 var username = $("#email").val(); if (username == '') { //alert("邮箱不能为空！"); $("#emailmsg").html("邮箱不能为空！"); return false; } else { $("#emailmsg").html(""); } //使用正则验证用户输入的邮箱格式是否合法 var reg = /^\w+@\w+\.\w+$/; //如果返回的为false说明用户输入的邮箱格式和正则不匹配 if (!reg.test(username)) { $("#emailmsg").html("邮箱格式不正确！"); return false; } return true; } function checkpwd() { var pwd = $("#pwd").val(); if (pwd == "") { //alert("密码不能为空！"); $("#pwdmsg").html("密码不能为空！"); return false; } else if (pwd.length < 6) { // alert("密码不能小于6位！"); $("#pwdmsg").html("密码不能小于6位！"); return false; } else { $("#pwdmsg").html(""); } return true; } //触发表单验证事件 $(function() { $("#loginForm").submit(function() { return checkemail() && checkpwd(); }); }); //焦点提示 $(function() { $("#email").blur(function() { return checkemail(); }) $("#pwd").blur(function() { return checkpwd(); }) }); </script> </head> <body> <header class="header_middle"> <div class="login_header_left"> <img src="images/logo.png" alt="logo" /> </div> <div class="login_header_right"> <a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a> | <a href="shopping.html" class="blue">购物车</a> | <a href="register.html" class="blue">注册</a> </div> </header> <div id="main"> <div class="login_main_left"> <img src="images/book.jpg"> </div> <div class="login_main_mid"> <div class="login_content_top">请登录蔚蓝网</div> <form id="loginForm" action="product.html" method="post"> <dl class="login_content"> <dt>Email地址或昵称：</dt> <dd> <input id="email" type="text" class="login_content_input" /> <div id="emailmsg"></div> </dd> </dl> <dl class="login_content"> <dt>密码：</dt> <dd> <input id="pwd" type="password" class="login_content_input" /> <div id="pwdmsg"></div> </dd> </dl> <dl class="login_content"> <dt></dt> <dd> <input id="btn" value=" " type="submit" class="login_btn_out" /> </dd> </dl> </form> <div class="login_content_end_bg"> <div class="login_content_end_bg_top"> <label class="login_content_bold">还不是蔚蓝网用户？</label>快捷方便的免费注册，让你立刻尽享蔚蓝网提供的条项优惠服务...... </div> <div class="login_content_end_bg_end"> <input id="quick_register" class="login_register_out" value=" " type="button" /> </div> </div> </div> </div> <footer id="footer"> <div class="footer_top"> <a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a> </div> <div class="footer_end"> Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权" style="vertical-align: middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号 </div> </footer> </body> </html>
二．蔚蓝网注册页面（register.html）
知识点：
1.表单验证和用户友好体验
2.jQuery验证
3.HTML5验证
HTML5表单验证源代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蔚蓝网注册页面</title> <link href="css/global.css" rel="stylesheet" /> <link href="css/layout.css" rel="stylesheet" /> <link href="css/template.css" rel="stylesheet" /> </head> <script type="text/javascript"> $(function(){ //提交表单 HTML5表单验证 $("#registerBtn").click(function(){ var email=document.getElementById("email"); if(email.validity.valueMissing==true){ email.setCustomValidity("邮箱不能为空"); } else if(email.validity.typeMismatch==true){ email.setCustomValidity("邮箱格式不正确，例如web@bdqn.cn"); } else{ email.setCustomValidity(""); } var uName=document.getElementById("nickName"); if(uName.validity.valueMissing==true){ uName.setCustomValidity("昵称不能为空"); } else if(uName.validity.patternMismatch==true){ uName.setCustomValidity("昵称必须是4~20位的英文和数字"); } else{ uName.setCustomValidity(""); } var pwd=document.getElementById("pwd"); if(pwd.validity.valueMissing==true){ pwd.setCustomValidity("密码不能为空"); } else if(pwd.validity.patternMismatch==true){ pwd.setCustomValidity("密码必须是6~20位的英文和数字"); } else{ pwd.setCustomValidity(""); } var repwd=document.getElementById("repwd"); if(repwd.val()==pwd.val()){ repwd.setCustomValidity("");} else{repwd.setCustomValidity("两次输入的密码不一致");} }); //提交按钮样式变化 $("#registerBtn").mouseover(function(){ $(this).attr("src","images/register_btn_over.gif"); }).mouseout(function(){ $(this).attr("src","images/register_btn_out.gif"); }); //省市级联 var cityList = new Array(); cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山']; cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区']; cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']; cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边']; cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区']; cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区']; cityList['江苏省'] = ['南京市','苏州市','无锡市']; cityList['浙江省'] = ['杭州市','宁波市','温州市']; cityList['四川省'] = ['四川省','成都市']; cityList['海南省'] = ['海口市']; cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市']; cityList['山东省'] = ['济南市','青岛市','烟台市']; cityList['江西省'] = ['江西省','南昌市']; cityList['广西省'] = ['柳州市','南宁市']; cityList['安徽省'] = ['安徽省','合肥市']; cityList['河北省'] = ['邯郸市','石家庄市']; cityList['河南省'] = ['郑州市','洛阳市']; cityList['湖北省'] = ['武汉市','宜昌市']; cityList['湖南省'] = ['湖南省','长沙市']; cityList['陕西省'] = ['陕西省','西安市']; cityList['山西省'] = ['山西省','太原市']; cityList['黑龙江省'] = ['黑龙江省','哈尔滨市']; cityList['其他'] = ['其他']; $("#province").append(function(){ var html=""; for (var i in cityList){ html+="<option value="+i+">"+i+"</option>"; } return $(html); }); $("#province").change(function(){ var v= $(this).val(); var html=""; if(v=="请选择省/城市"){ html="<option>请选择城市/地区</option>"; $("#city").html(html); return; } var citys=cityList[v]; $.each(citys,function(i,n){ html+="<option value="+n+">"+n+"</option>"; }); $("#city").html(html); }); }); </script> <body> <header class="header_middle"> <div id="register_header"> <div class="register_header_left"> <img src="images/logo.png" alt="logo" /> </div> <div class="register_header_right"> <a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a> | <a href="shopping.html" class="blue">购物车</a> | <a href="login.html" class="blue">登录</a> </div> </div> </header> <section id="main"> <div class="register_content"> <div class="register_mid_bg">用户注册</div> <div class="register_message"> <form action="" method="post" id="myform"> <dl class="register_row"> <dt>Email地址：</dt> <dd> <input id="email" type="email" required="required" class="register_input" /> </dd> </dl> <dl class="register_row"> <dt>设置昵称：</dt> <dd> <input id="nickName" type="text" class="register_input" required="required" pattern="[a-zA-Z0-9]{4,20}" /> </dd> </dl> <dl class="register_row"> <dt>设定密码：</dt> <dd> <input id="pwd" type="password" class="register_input" required="required" pattern="[a-zA-Z0-9]{6,20}" /> </dd> </dl> <dl class="register_row"> <dt>再输入一次密码：</dt> <dd> <input id="repwd" type="password" class="register_input" /> </dd> </dl> <dl class="register_row"> <dt>性别：</dt> <dd> <input name="sex" id="man" type="radio" value="男" checked="checked" /> <label for="man">男</label> </dd> <dd> <input name="sex" id="woman" type="radio" value="女" /> <label for="woman">女</label> </dd> </dl> <dl class="register_row"> <dt>所在地区：</dt> <dd> <select id="province" style="width: 120px;"> <option>请选择省/城市</option> </select> </dd> <dd> <select id="city" style="width: 130px;"> <option>请选择城市/地区</option> </select> </dd> </dl> <div class="registerBtn"> <input id="registerBtn" type="image" src="images/register_btn_out.gif" /> </div> </form> </div> </div> </section> <!--网站版权部分开始--> <footer id="footer"> <div class="footer_top"> <a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a> </div> <div class="footer_end"> Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权" style="vertical-align: middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号 </div> </footer> <script src="js/jquery.js"></script> </body> </html>
三．蔚蓝网首页（index.html）
知识点：
1.图书的固定定位：距离页面顶端的距离不变(或者使用HTML5的fixed固定定位也可以做到，这里使用jQuery实现)
2.新手入门下拉框（鼠标移入）
3.图书畅销榜下拉框（鼠标悬停在右侧，选项卡和单个选项卡下的项目可以显示）
4.首页图片轮播
5.书讯快速无缝滚动
6.电子书鼠标悬停 ，图片有一个动画效果（这个是使用jQuery实现，HTML5也可实现）
源代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蔚蓝网首页</title> <link href="css/global.css" rel="stylesheet" /> <link href="css/layout.css" rel="stylesheet" /> <link href="css/template.css" rel="stylesheet" /> <script src="js/jquery.js"></script> </head> <script type="text/javascript"> //1.图书的固定定位：距离页面顶端的距离不变 //1.右上角的关闭按钮 $(function() { $('#dd_close').click(function() { $(this).parent().remove(); //parent获取父类 remove直接给他全部删除 }); //首先定义距离 var whith = parseInt($('#right').css('top')); //top顶部的意思 获取高度 var grith = parseInt($('#right').css('left')); //获取宽度 //alert(whith); $(window).scroll(function() {//页面改变的方法 var scrollTop = parseInt($(this).scrollTop()); //获取顶部的位置 $("#right").offset({ 'top' : scrollTop + whith }); }); }); //2.新手入门下拉框（鼠标移入） //用下边的也行 $(function() { $('#menu').mouseenter(function() { $('#dd_menu_top_down').slideDown(1000); }).mouseleave(function() { $('#dd_menu_top_down').slideUp(1000); }); }); /* $(function() { $('#menu').hover(function() { $('#dd_menu_top_down').show().slideDown(1000); }, function() { $('#dd_menu_top_down').hide().slideUp(1000); }) }) */ //3.图书畅销榜下拉框（鼠标悬停在右侧，选项卡和单个选项卡下的项目可以显示） //其他的选项卡或者是单个项目隐藏或者折叠 $(function() { $(".tab ul li").hover(function() { $(this).find("p").hide(); $(this).find("dl").show(); }, function() { $(this).find("p").show(); $(this).find("dl").hide(); }); }) //4.首页图片轮播 $(function() { function changeImg() { var index = 0;//当前元素 var stop = false;//不停的时候 var $li = $("#content").find("#scroll_img").children("li");//找到子元素 var $page = $("#content").find("#scroll_number").children("li");//找到数字元素 $page.eq(index).addClass("scroll_number_over").stop(true, true) .siblings().removeClass("scroll_number_over"); $page.mouseover( function() { stop = true; index = $page.index($(this)); $li.eq(index).stop(true, true).fadeIn().siblings() .fadeOut(); $(this).addClass("scroll_number_over").stop(true, true) .siblings().removeClass("scroll_number_over"); }).mouseout(function() { stop = false; }); setInterval(function() { if (stop) return; index++; if (index >= $li.length) { index = 0; } $li.eq(index).stop(true, true).fadeIn().siblings().fadeOut(); $page.eq(index).addClass("scroll_number_over").stop(true, true) .siblings().removeClass("scroll_number_over"); }, 3000); 0 } changeImg(); }) //5.书讯快速无缝滚动 //书讯快递循环垂直向上滚动 function movedome() { var marginTop = 0;//定义一个变量 var stop = false;//设置定时器false; var interval = setInterval(function() {//开启定时器事件： if (stop) return;//如果开始就不动：定时器的变量制false; $("#express").children("li").first().animate({ "margin-top" : marginTop-- }, 0, function() { var $first = $(this); if (!$first.is(":animated")) { if ((-marginTop) > $first.height()) { $first.css({ "margin-top" : 1 }).appendTo($("#express"));//追加一个express让他一直循环 marginTop = 0;//当值变为0的时候，marginTop变为0，距离 } } }); }, 50);//0.05秒 $("#express").mouseover(function() {//当鼠标移上时 stop = true;//开始停？ }).mouseout(function() { stop = false;//开始动 }); } movedome();//走到这个方法就走这，在方法外部定义 //6.电子书鼠标悬停 ，图片有一个动画效果 $(function() { $(".book ul img").mouseenter(function() { $(this).animate({ width : "110%" }, "slow"); }); $(".book ul img").mouseleave(function() { $(this).animate({ width : "80%" }, "slow"); }); }) </script> <body> <!--随滚动条滚动可关闭广告--> <div id="right" class="right"> <div class="dd_close" id="dd_close"> <a href="javascript:void(0);">关闭</a> </div> <img src="images/scroll.jpg" id="right1" /> </div> <!--头部--> <header id="header"> <div class="header_top"> <div class="header_top_left"> 您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html" target="_parent">免费注册</a>] </div> <div class="header_top_right"> <ul> <li><a href="#" target="_self">客户服务</a></li> <li>|</li> <li id="menu"><a href="#" target="_self">新手入门</a> <img src="images/arrow_down.gif" alt="arrow" /> <div id="dd_menu_top_down"> <a href="#" target="_self">购物保障</a><br /> <a href="#" target="_self">购物流程</a><br /> <a href="#" target="_self">会员介绍</a><br /> <a href="#" target="_self">常见问题</a><br /> </div></li> <li>|</li> <li><a href="#" target="_self">礼品卡</a></li> <li>|</li> <li><a href="#" target="_self">我的订单</a></li> <li>|</li> <li><a href="#" target="_self">我的账户</a></li> <li>|</li> <li><a href="shopping.html" target="_parent">购物车</a></li> <li><img src="images/header_shop.gif" alt="shopping" /></li> </ul> </div> </div> </header> <div class="header_middle"> <div class="logo"> <img src="images/logo.png" alt="logo" /> </div> <div class="search"> <input type="text" placeholder="请输入搜索关键字"><input type="button"> </div> </div> <nav id="nav"> <ul> <li><a href="#"> 全部商品分类</a></li> <li><a href="#"> 首页</a></li> <li><a href="#"> 图书</a></li> <li><a href="#"> 特价</a></li> <li><a href="#"> 团购</a></li> </ul> </nav> <!--网站中间内容开始--> <section id="main"> <!--左侧菜单开始--> <div id="catList"> <!--图书商品分类开始--> <div class="book_sort"> <div class="book_sort_bg"> <img src="images/dd_book_cate_icon.gif" alt="图书" /> 图书商品分类 </div> <div class="book_sort_bottom">悬疑 | 言情 | 职场 | 财经</div> <div class="book_sort_bottom">文学 | 传记 | 艺术 | 摄影</div> <div class="book_sort_bottom">青春文学 | 动漫 | 幽默</div> <div class="book_sort_bottom">修养 | 成功 | 职场 | 沟通</div> <div class="book_sort_bottom"> 0-2 | 3-6 | 7-10 | 11-14<br />文学 | 科普 | 图画书 </div> <div class="book_sort_bottom">教材 | 中小学教辅 | 外语</div> <!--<div class="book_sort_bottom">保健 | 家教 | 美丽装扮 | 育儿 | 美食 | 旅游 | 收藏 | 生活 | 体育 | 地图 | 个人理财</div> <div class="book_cate">[个人社科]</div> <div class="book_sort_bottom">文化 | 历史 | 哲学/宗教 | 古籍 | 政治/历史 | 法律 | 经济 | 社会科学 | 心理学</div> <div class="book_cate">[管理]</div> <div class="book_sort_bottom">管理 | 金融 | 营销 | 会计</div> <div class="book_cate">[科技]</div> <div class="book_sort_bottom">科普 | 建筑 | 医学 | 计算机 | 农林 | 自然科学 | 工业 | 通信</div> <div class="book_cate">[教育]</div> <div class="book_cate">[工具书]</div> <div class="book_cate">[图外原版书]</div> <div class="book_cate">[期刊]</div> --> </div> <!--图书商品分类结束--> </div> <!--左侧菜单结束--> <!--中间部分开始--> <div id="content"> <!--轮换显示的横幅广告图片--> <div class="scroll"> <ul id="scroll_img"> <li><img src="images/scroll-01.jpg" /></li> <li><img src="images/scroll-02.jpg" /></li> <li><img src="images/scroll-03.jpg" /></li> <li><img src="images/scroll-04.jpg" /></li>0 </ul> <ul id="scroll_number"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> <!--中间部分结束--> <!--右侧部分开始--> <section id="silder"> <!--书讯快递--> <div class="book_sort"> <div class="book_sort_bg"> <img src="images/dd_book_mess.gif" alt="mess" style="vertical-align: text-bottom;" />书讯快递 </div> <div class="book_class"> <div id="dome"> <div id="dome1"> <ul id="express"> <li>・2010考研英语大纲到货75折...</li> <li>・权威定本四大名著（人民文...</li> <li>・口述历史权威唐德刚先生国...</li> <li>・袁伟民与体坛风云：实话实...</li> <li>・我们台湾这些年：轰动两岸...</li> <li>・畅销教辅推荐：精品套书50...</li> <li>・2010版法律硕士联考大纲75...</li> <li>・计算机新书畅销书75折抢购</li> <li>・2009年孩子最喜欢的书>></li> <li>・弗洛伊德作品精选集59折</li> <li>・2010考研英语大纲到货75折...</li> <li>・权威定本四大名著（人民文...</li> <li>・口述历史权威唐德刚先生国...</li> <li>・袁伟民与体坛风云：实话实...</li> <li>・我们台湾这些年：轰动两岸...</li> <li>・畅销教辅推荐：精品套书50...</li> <li>・2010版法律硕士联考大纲75...</li> <li>・计算机新书畅销书75折抢购</li> <li>・2009年孩子最喜欢的书>></li> <li>・弗洛伊德作品精选集59折</li> <li>・2010考研英语大纲到货75折...</li> <li>・权威定本四大名著（人民文...</li> <li>・口述历史权威唐德刚先生国...</li> <li>・袁伟民与体坛风云：实话实...</li> <li>・我们台湾这些年：轰动两岸...</li> <li>・畅销教辅推荐：精品套书50...</li> <li>・2010版法律硕士联考大纲75...</li> <li>・计算机新书畅销书75折抢购</li> <li>・2009年孩子最喜欢的书>></li> <li>・弗洛伊德作品精选集59折</li> <li>・2010考研英语大纲到货75折...</li> <li>・权威定本四大名著（人民文...</li> <li>・口述历史权威唐德刚先生国...</li> <li>・袁伟民与体坛风云：实话实...</li> <li>・我们台湾这些年：轰动两岸...</li> <li>・畅销教辅推荐：精品套书50...</li> <li>・2010版法律硕士联考大纲75...</li> <li>・计算机新书畅销书75折抢购</li> <li>・2009年孩子最喜欢的书>></li> <li>・弗洛伊德作品精选集59折</li> </ul> </div> </div> </div> </div> </section> <!--右侧部分结束--> <section class="book"> <h1>电子书</h1> <ul> <li><img src="images/dianzi01.jpg"></li> <li><img src="images/dianzi02.jpg"></li> <li><img src="images/dianzi03.jpg"></li> <li><img src="images/dianzi04.jpg"></li> <li><img src="images/dianzi05.jpg"></li> <li><img src="images/dianzi06.jpg"></li> </ul> </section> <section class="tab"> <ol> <li>图书畅销榜</li> <li>图书上新书榜</li> </ol> <ul> <li><span>1</span> <p>追风筝的人</p> <dl> <dt> <img src="images/selling01.jpg"> </dt> <dd> <h1>追风筝的人</h1> 中文版，快乐大本营高圆圆感动推荐，奥巴马送给女儿的新年礼物 </dd> </dl></li> <li><span>2</span> <p>解忧杂货店</p> <dl> <dt> <img src="images/selling02.jpg"> </dt> <dd> <h1>解忧杂货店</h1> 《白夜行》后东野圭吾备受欢迎作品：不是推理小说，却更扣人心弦 </dd> </dl></li> <li><span>3</span> <p>天才在左疯子在右</p> <dl> <dt> <img src="images/selling03.jpg"> </dt> <dd> <h1>天才在左疯子在右</h1> 新增10个被封杀篇章！看高智商疯子如何调戏和羞辱正常人！继高圆圆后，女神陈乔恩芒果台盛情推荐！ </dd> </dl></li> <li><span>4</span> <p>白夜行</p> <dl> <dt> <img src="images/selling04.jpg"> </dt> <dd> <h1>白夜行</h1> 东野圭吾推理小说无冕之王。全新精装典藏版 </dd> </dl></li> <li><span>5</span> <p>阮/陈恩静 吕亦涵 著</p> <dl> <dt> <img src="images/selling05.jpg"> </dt> <dd> <h1>阮/陈恩静 吕亦涵 著</h1> 商战风云诡谲X情场暗潮汹涌。这一生幸运的是—— 以你之名，冠我之姓 </dd> </dl></li> <li><span>6</span> <p>摆渡人</p> <dl> <dt> <img src="images/selling06.jpg"> </dt> <dd> <h1>摆渡人</h1> 畅销欧美33个国家，荣获多项图书大奖。如果命运是一条孤独的河流，谁会是你灵魂的摆渡人？如果我真的存在，也是因为你需要我。 </dd> </dl></li> <li><span>7</span> <p>岛上书店</p> <dl> <dt> <img src="images/selling07.jpg"> </dt> <dd> <h1>岛上书店</h1> 每个人的生命中，都有无比艰难的那一年，将人生变得美好而辽阔 </dd> </dl></li> <li><span>8</span> <p>百年孤独</p> <dl> <dt> <img src="images/selling08.jpg"> </dt> <dd> <h1>百年孤独</h1> 加西亚马尔克斯代表作，中文版首次授权！ </dd> </dl></li> <li><span>9</span> <p>我们仨</p> <dl> <dt> <img src="images/selling09.jpg"> </dt> <dd> <h1>我们仨</h1> 《我们仨》是杨绛先生撰写的家庭生活回忆录，三联书店出版，影响几代人的作品，杨绛先生经典散文！ </dd> </dl></li> <li><span>10</span> <p>从你的全世界路过</p> <dl> <dt> <img src="images/selling10.jpg"> </dt> <dd> <h1>从你的全世界路过</h1> 从你的全世界路过 2014中国好书榜获奖图书 </dd> </dl></li> </ul> <ul> <li><span>1</span> <p>好吗好的</p> <dl> <dt> <img src="images/newBook01.jpg"> </dt> <dd> <h1>好吗好的</h1> 凡8月12日20:00前下单顾客，100%有大冰亲笔签名，之后下单顾客先到先得签名。各仓到货时间不一致，请各位耐心等待。 </dd> </dl></li> <li><span>2</span> <p>永无止尽的约会</p> <dl> <dt> <img src="images/newBook02.jpg"> </dt> <dd> <h1>永无止尽的约会</h1> 永无止尽的约会 </dd> </dl></li> <li><span>3</span> <p>你的坚持，终将美好</p> <dl> <dt> <img src="images/newBook03.jpg"> </dt> <dd> <h1>你的坚持，终将美好</h1> 无论正在经历什么，都请你不要轻言放弃，因为从来没有一种坚持会被辜负 </dd> </dl></li> <li><span>4</span> <p>茧</p> <dl> <dt> <img src="images/newBook04.jpg"> </dt> <dd> <h1>茧</h1> 阔别十年，张悦然与我们再度重逢。真正的爱，是知道爱你有多困难还选择爱你；真正的长大，是知道生活的真相还热爱生活 </dd> </dl></li> <li><span>5</span> <p>就喜欢你看不惯我</p> <dl> <dt> <img src="images/newBook05.jpg"> </dt> <dd> <h1>就喜欢你看不惯我</h1> 霸气吾皇率蠢萌巴扎黑、伪深邃的牛能强势归来！ </dd> </dl></li> <li><span>6</span> <p>遇见美好系列</p> <dl> <dt> <img src="images/newBook06.jpg"> </dt> <dd> <h1>遇见美好系列</h1> 全8册，3-7岁心灵成长绘本。 </dd> </dl></li> <li><span>7</span> <p>八万四千问</p> <dl> <dt> <img src="images/newBook07.jpg"> </dt> <dd> <h1>八万四千问</h1> 宗萨蒋扬钦哲仁波切四年来首部作品：“佛法能够解决你们的所有问题。 </dd> </dl></li> <li><span>8</span> <p>极简生活：简而美地活</p> <dl> <dt> <img src="images/newBook08.jpg"> </dt> <dd> <h1>极简生活：简而美地活</h1> 极简是风靡全球的一种生活态度与理念。告别繁杂，拥有简而美的生活。 </dd> </dl></li> <li><span>9</span> <p>好妈妈胜过好老师</p> <dl> <dt> <img src="images/newBook09.jpg"> </dt> <dd> <h1>好妈妈胜过好老师</h1> 好妈妈胜过好老师2：自由的孩子最自觉 </dd> </dl></li> <li><span>10</span> <p>我们始终独自行走在这个世界</p> <dl> <dt> <img src="images/newBook10.jpg"> </dt> <dd> <h1>我们始终独自行走在这个世界</h1> 十点读书、二更食堂、清华南都等各大微信阅读平台，简书、豆瓣千万读者口碑相传作品。 </dd> </dl></li> </ul> </section> </section> <!--网站版权部分开始--> <footer id="footer"> <div class="footer_top"> <a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a> </div> <div class="footer_end"> Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权" style="vertical-align: middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号 </div> </footer> </body> </html>
四．蔚蓝网商品展示页面（product.html）
知识点：
1.图片大图与列表之间的转换
源代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蔚蓝网商品展示页面</title> <link href="css/global.css" rel="stylesheet" /> <link href="css/layout.css" rel="stylesheet" /> <link href="css/template.css" rel="stylesheet" /> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function($){ //图书分类动态展示 function productList(){ var list=new Array( "中国当代小说（13880）","中国近现代小...（640）","中国古典小说（1547）", "四大名著（696）","港澳台小说（838）","外国小说（5119）", "侦探/悬疑/推...（2519）","惊悚/恐怖（798）","魔幻（369）","科幻 （513）", "武侠（574）","军事（726）","情感 （6700）", "社会（4855）","都市（949）","乡土（99）","职场（176）", "财经（292）","官场（438）","历史（1329）","影视小说（501）", "作品集（2019）","世界名著（3273）" ); var html=[]; $.each(list, function(i, n){ html.push("<li> ·<a href='#' class='blue'>"+n+"</a></li>"); }); $("#product_catList_class").html(html.join("")); } productList(); //图书动态展示 function bookList(){ var catalog=new Array(); catalog[0] = ['product_list_01.jpg','私募（首部披露资本博弈秘密的金融小说）',4,'郭现杰','花山文艺出版社', '2009年08月', '数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金—金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。殊料，以王雨龙为首的私募基金—鑫利投资背信弃义，导致金鼎投资惨败。以至...', '13.10','59折','￥18.90','￥32.00']; catalog[1] = ['product_list_02.jpg','圈子圈套.1.战局篇',4,'王强','清华大学出版社', '2006年01月', '虽然没有硝烟，却比战场更血腥；虽然并未战死，却比死亡更痛苦。 洪钧从一个底层的销售人员，成为一家著名的跨国公司的中国区代理首席代表，在即将被扶正，事业情感都志得意满的时候，掉入俞威设计的圈套，...', '￥8.90','68折','￥19.10','￥28.00']; var html=""; $.each(catalog,function(i,n){ html+="<div class='product_storyList_content_left'><img src=images/"+n[0]+" alt='图书列表'></div>"; html+="<div class='product_storyList_content_right'><ul>"; html+="<li class='product_storyList_content_dash'><a href='#' class='blue_14'>"+n[1]+"</a></li>"; html+="<li>顾客评分："; for(var k=0;k<5;k++){ if(k<n[2]){ html+= "<img src='images/star_red.gif' alt='star'>"; } else{ html+= "<img src='images/star_gray.gif' alt='star'>"; } } html+="</li>"; html+="<li>作 者：<a href='#' class='blue_14'>"+n[3]+"</a> 著</li>"; html+="<li>出版社：<a href='#' class='blue_14'>"+n[4]+"</a></li>"; html+="<li>出版时间："+n[5]+"</li>"; html+="<li>"+n[6]+"</li>"; html+="<li> <dl class='product_content_dd'>"; html+="<dd><img src='images/product_buy_02.gif' alt='shopping'></dd>"; html+="<dd><img src='images/product_buy_01.gif' alt='shopping'></dd>"; html+="<dd>节省："+n[7]+"</dd>"; html+="<dd>折扣：<span>"+n[8]+"</span></dd>"; html+="<dd class='footer_dull_red'><span>"+n[9]+"</span></dd>"; html+="<dd class='product_content_delete'><span>"+n[10]+"</span></dd>"; html+="</dl></li></ul></div>"; html+="<div class='product_storyList_content_bottom'></div>"; }); $("#storyBooksssss").html(html); } bookList(); //获取列表形式List,默认是列表形式，因此先取得列表形式的内容 var arrayBookList=$("#product_storyList_content").html(); //获取大图形式List function getBigBookList(){ var $initContent=$("#product_storyList_content"); var $bookImg = $initContent.find(".product_storyList_content_left"); var contents=""; $initContent.find(".product_storyList_content_right").find("ul").each(function(i,ele){ var div=""; var content=[div,"<div class='big_img_list'><ul><li class='bookImg'>"+$($bookImg[i]).html()+"</li>"]; var $li=$(ele).children("li"); var $price=$($li[6]).find("span"); content.push("<li><dl><dd class='footer_dull_red'>" +$($price[1]).text()+"</dd><dd class='product_content_delete'>" +$($price[2]).text()+"</dd><dd class='footer_dull_red'>" +$($price[0]).text()+"</dd></dl></li>");//价格 content.push("<li class='detail'>"+$($li[5]).html()+"</li>");//简介 content.push("<li class='detail'>"+$($li[2]).html()+"</li>");//作 者 content.push("<li class='detail'>"+$($li[1]).html()+"</li>");//顾客评分 content.push("<li class='detail'>"+$($li[3]).html()+"</li>");//出版社 content.push("<li class='detail'>"+$($li[4]).html()+"</li></ul></div>");//出版时间 contents+=content.join(""); }); return contents; } var bigBookList=getBigBookList();//获取大图形式List //大图列表切换 $("#product_array").children("a").click(function(){ if($(this).is("[class='click']")) return;//如果已经点击那么返回，用class来判断 $(this).siblings().removeClass("click"); $(this).addClass("click"); //用元素的name来判断 if($(this).attr("name")=="array"){//列表 $("#product_storyList_content").empty().html(arrayBookList); }else{//大图 $("#product_storyList_content").empty().html(bigBookList); $("#product_storyList_content").children(".big_img_list").find("ul").mouseover(function(){ $(this).addClass("over"); $(this).parent().addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); $(this).parent().removeClass("over"); }); } }); }); </script> </head> <body> <header id="header"> <div class="header_top"> <div class="header_top_left"> 您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html" target="_parent">免费注册</a>] </div> <div class="header_top_right"> <ul> <li><a href="#" target="_self">客户服务</a></li> <li>|</li> <li id="menu"><a href="#" target="_self">新手入门</a> <img src="images/arrow_down.gif" alt="arrow" /> <div id="dd_menu_top_down"> <a href="#" target="_self">购物保障</a><br /> <a href="#" target="_self">购物流程</a><br /> <a href="#" target="_self">会员介绍</a><br /> <a href="#" target="_self">常见问题</a><br /> </div></li> <li>|</li> <li><a href="#" target="_self">礼品卡</a></li> <li>|</li> <li><a href="#" target="_self">我的订单</a></li> <li>|</li> <li><a href="#" target="_self">我的账户</a></li> <li>|</li> <li><a href="shopping.html" target="_parent">购物车</a></li> <li><img src="images/header_shop.gif" alt="shopping" /></li> </ul> </div> </div> </header> <div class="header_middle"> <div class="logo"> <img src="images/logo.png" alt="logo" /> </div> <div class="search"> <input type="text" placeholder="请输入搜索关键字"><input type="button"> </div> </div> <nav id="nav"> <ul> <li><a href="#"> 全部商品分类</a></li> <li><a href="#"> 首页</a></li> <li><a href="#"> 图书</a></li> <li><a href="#"> 特价</a></li> <li><a href="#"> 团购</a></li> </ul> </nav> <!--中间部分开始--> <section id="main"> <div class="current_place"> 您现在的位置：<a href="index.html">蔚蓝图书</a> >> 小说 >> 财经 </div> <!--左侧菜单开始--> <div id="product_left"> <div id="product_catList"> <div class="product_catList_top">浏览同级分类</div> <div id="product_catList_class"> <!--使用javaScript显示图书分类--> </div> </div> <div class="product_catList_end"> <img src="images/product_01.gif" alt="shopping" /> <img src="images/product_02.gif" alt="shopping" /> </div> </div> <!--右侧内容开始--> <div id="product_storyList"> <div id="product_storyList_top"> <ul> <li>排序方式</li> <li><img src="images/dd_arrow_right.gif" alt="arrow" /></li> <li><select id="compositor"> <option>按销量 降序</option> <option>按价格 升序</option> <option>按价格 降序</option> <option>按折扣 升序</option> <option>按折扣 降序</option> <option>按出版时间 升序</option> <option>按出版时间 降序</option> <option>按上架时间 升序</option> <option>按上架时间 降序</option> </select></li> <li><img src="images/product_icon_01.gif" alt="icon" /></li> <li><img src="images/product_icon_02.gif" alt="icon" /></li> <li><img src="images/product_icon_03.gif" alt="icon" /></li> <li><img src="images/product_icon_04.gif" alt="icon" /></li> <li>每页显示的数量</li> <li><img src="images/dd_arrow_right.gif" alt="arrow" /></li> <li><img src="images/product_icon_20.gif" alt="icon" /></li> <li><img src="images/product_icon_40.gif" alt="icon" /></li> <li style="float: right; padding-right: 10px;"><img src="images/product_page_down.gif" alt="icon" /></li> <li style="float: right;">第1页</li> <li style="float: right;"><img src="images/product_page_up.gif" alt="icon" /></li> </ul> </div> <div id="product_array"> <a class="click" name="array" href="javascript:void(0)">列表</a> <a name="bigImg" href="javascript:void(0)">大图</a> </div> <!--图书排列开始--> <div id="product_storyList_content" class="product_storyList_content"> <div id="storyBooksssss"> <!--使用javaScript显示图书列表--> </div> <!--列表开始--> <div class="product_storyList_content_left"> <img src="images/product_list_01.jpg" alt="图书列表" /> </div> <div class="product_storyList_content_right"> <ul> <li class="product_storyList_content_dash"><a href="#" class="blue_14">私募（首部披露资本博弈秘密的金融小说）</a></li> <li>顾客评分：<img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_gray.gif" alt="star" /></li> <li>作 者：<a href="#" class="blue_14">郭现杰</a> 著 </li> <li>出版社：<a href="#" class="blue_14">花山文艺出版社</a></li> <li>出版时间：2009年08月</li> <li>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金―金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。殊料，以王雨龙为首的私募基金―鑫利投资背信弃义，导致金鼎投资惨败。以至...</li> <li> <dl class="product_content_dd"> <dd> <img src="images/product_buy_02.gif" alt="shopping" /> </dd> <dd> <img src="images/product_buy_01.gif" alt="shopping" /> </dd> <dd>节省：￥13.10</dd> <dd> 折扣：<span>59折</span> </dd> <dd class="footer_dull_red"> <span>￥18.90</span> </dd> <dd class="product_content_delete"> <span>￥32.00</span> </dd> </dl> </li> </ul> </div> <div class="product_storyList_content_bottom"></div> <!--列表开始--> <div class="product_storyList_content_left"> <img src="images/product_list_02.jpg" alt="图书列表" /> </div> <div class="product_storyList_content_right"> <ul> <li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套.1.战局篇 </a></li> <li>顾客评分：<img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red2.gif" alt="star" /></li> <li>作 者：<a href="#" class="blue_14">王强 </a> 著 </li> <li>出版社：<a href="#" class="blue_14">清华大学出版社</a></li> <li>出版时间：2006年01月</li> <li>虽然没有硝烟，却比战场更血腥；虽然并未战死，却比死亡更痛苦。 洪钧从一个底层的销售人员，成为一家著名的跨国公司的中国区代理首席代表，在即将被扶正，事业情感都志得意满的时候，掉入俞威设计的圈套，...</li> <li> <dl class="product_content_dd"> <dd> <img src="images/product_buy_02.gif" alt="shopping" /> </dd> <dd> <img src="images/product_buy_01.gif" alt="shopping" /> </dd> <dd>节省：￥8.90</dd> <dd> 折扣：<span>68折</span> </dd> <dd class="footer_dull_red"> <span>￥19.10</span> </dd> <dd class="product_content_delete"> <span>￥28.00</span> </dd> </dl> </li> </ul> </div> <div class="product_storyList_content_bottom"></div> <!--列表开始--> <div class="product_storyList_content_left"> <img src="images/product_list_03.jpg" alt="图书列表" /> </div> <div class="product_storyList_content_right"> <ul> <li class="product_storyList_content_dash"><a href="#" class="blue_14">饕餮（最真实的商场高端博弈小说） </a></li> <li>顾客评分：<img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /></li> <li>作 者：<a href="#" class="blue_14">韦帕 </a> 著 </li> <li>出版社：<a href="#" class="blue_14">国际文化出版公司</a></li> <li>出版时间：2009年07月</li> <li>北京，六百公里处，有宝地，233亩，土地价值2.5亿，总投资额近八亿，利润近三亿。 项目吸引了众多北京房地产商目光，其中最贪婪的一道目光，来自顾忱。但顾忱，总资产不过千万！想拿项目，无异于“空手套...</li> <li> <dl class="product_content_dd"> <dd> <img src="images/product_buy_02.gif" alt="shopping" /> </dd> <dd> <img src="images/product_buy_01.gif" alt="shopping" /> </dd> <dd>节省：￥8.40</dd> <dd> 折扣：<span>74折</span> </dd> <dd class="footer_dull_red"> <span>￥23.60</span> </dd> <dd class="product_content_delete"> <span>￥32.00</span> </dd> </dl> </li> </ul> </div> <div class="product_storyList_content_bottom"></div> <!--列表开始--> <div class="product_storyList_content_left"> <img src="images/product_list_04.jpg" alt="图书列表" /> </div> <div class="product_storyList_content_right"> <ul> <li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套 迷局篇2：职场商战三部曲 </a></li> <li>顾客评分：<img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /></li> <li>作 者：<a href="#" class="blue_14">王强 </a> 著 </li> <li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li> <li>出版时间：2006年08月</li> <li>《圈子圈套2・迷局篇》是“圈子圈套三部曲”的第二部。 职场风云再起。洪钧出任维西尔中国区总经理，他和俞威之间的较量又或明或暗地展开来，面对内部的纷争和商场上的尔虞我诈，他该如何出招……俞威依...</li> <li> <dl class="product_content_dd"> <dd> <img src="images/product_buy_02.gif" alt="shopping" /> </dd> <dd> <img src="images/product_buy_01.gif" alt="shopping" /> </dd> <dd>节省：￥11.4</dd> <dd> 折扣：<span>59折</span> </dd> <dd class="footer_dull_red"> <span>￥16.60</span> </dd> <dd class="product_content_delete"> <span>￥28.00</span> </dd> </dl> </li> </ul> </div> <div class="product_storyList_content_bottom"></div> <!--列表开始--> <div class="product_storyList_content_left"> <img src="images/product_list_05.jpg" alt="图书列表" /> </div> <div class="product_storyList_content_right"> <ul> <li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套3.终局篇（附赠王强演讲光盘） </a></li> <li>顾客评分：<img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_red.gif" alt="star" /><img src="images/star_gray.gif" alt="star" /></li> <li>作 者：<a href="#" class="blue_14">王强 </a> 著 </li> <li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li> <li>出版时间：2007年10月</li> <li>本书全景展示了商场和职场的生死厮杀、巅峰对决。主人公的命运、项目结局、所有的爱恨情仇都在本书中揭开谜底。 再次陷入低谷的洪钧在内忧外患中不甘消沉，在职场上和自己的上司明争暗斗，在商场上则和夙...</li> <li> <dl class="product_content_dd"> <dd> <img src="images/product_buy_02.gif" alt="shopping" /> </dd> <dd> <img src="images/product_buy_01.gif" alt="shopping" /> </dd> <dd>节省：￥13.10</dd> <dd> 折扣：<span>59折</span> </dd> <dd class="footer_dull_red"> <span>￥18.9</span> </dd> <dd class="product_content_delete"> <span>￥32.00</span> </dd> </dl> </li> </ul> </div> <div class="product_storyList_content_bottom"></div> <div> <dl class="product_content_dd"> <dd> <img src="images/OK.gif" alt="ok" /> </dd> <dd>页</dd> <dd> <input name="page" type="text" value="1" style="width: 20px;" /> </dd> <dd>跳转到第</dd> <dd> <img src="images/next.gif" alt="ok" /> </dd> <dd> <ul id="product_page"> <li><a href="#" class="product_page">1</a></li> <li><a href="#" class="product_page">2</a></li> <li><a href="#" class="product_page">3</a></li> <li>...</li> <li><a href="#" class="product_page">14</a></li> <li><a href="#" class="product_page">15</a></li> <li><a href="#" class="product_page">16</a></li> </ul> </dd> <dd> <img src="images/product_page_up.gif" alt="ok" /> </dd> </dl> </div> </div> </div> <!--右侧内容结束--> </section> <!--网站版权部分开始--> <footer id="footer"> <div class="footer_top"> <a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a> </div> <div class="footer_end"> Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权" style="vertical-align: middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号 </div> </footer> </body> </html>
五. 蔚蓝网购物车页面（shopping.html）
知识点：
1.商品的隐藏和显示
2.还有一些商品价格的计算
3.积分计算
源代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蔚蓝网购物车页面</title> <link href="css/global.css" rel="stylesheet" /> <link href="css/layout.css" rel="stylesheet" /> <link href="css/template.css" rel="stylesheet" /> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function($) { //根据您挑选的商品，当当为您推荐部分的显示和隐藏 $("#shopping_commend_arrow").click(function() { if ($("#shopping_commend_sort").css("display") == "none") { $(this).attr("src", "images/shopping_arrow_up.gif"); } else { $(this).attr("src", "images/shopping_arrow_down.gif"); } $("#shopping_commend_sort").toggle(); }); //商品隔行变色 $("#myTableProduct").find("tr:odd").css("backgroundColor", "#ffebcd"); //商品变色 $("#myTableProduct").find("tr").mouseover(function() { $(this).css("backgroundColor", "#fff"); }).mouseout(function() { if ($("#myTableProduct").find("tr").index($(this)) % 2 == 1) {//判断是否奇数行 $(this).css("backgroundColor", "#ffebcd"); } else { $(this).css("backgroundColor", "#fefbf2"); } }); //计算总价 function totalPrice() { var percents = 0, prePrices = 0, prices = 0;//积分，原价，现价 $("#myTableProduct").find("tr").each( function(i, ele) { var num = $(ele).find(".shopping_product_list_5").find( "input").val();//数量 percents += parseInt($(ele).find( ".shopping_product_list_2").text()) * num; //解决下js中浮点数的bug问题，因此建议浮点数的运算不要放在前台，这里是指粗略的解决了一下 var price = parseInt($(ele).find( ".shopping_product_list_4").find("label") .text().replace(".", "")) * num; prices += price; var prePrice = parseInt($(ele).find( ".shopping_product_list_3").find("label") .text().replace(".", "")) * num; prePrices += prePrice; }); $("#product_integral").text(percents); $("#product_total").text(prices / 100); $("#product_save").text((prePrices - prices) / 100); return prices / 100; } totalPrice(); //删除商品 $("#myTableProduct").find(".shopping_product_list_6").children("a") .click(function() { if (confirm("您确定要删除商品么？")) { $(this).parent().parent().remove(); totalPrice(); } }); //修改数量 $("#myTableProduct").find(".shopping_product_list_5").children("input") .change(function() { var value = $(this).val(); if ((value == "") || !(/^[0-9]*[1-9][0-9]*$/.test(value))) { alert("数量不能为空，且只能为正整数"); $(this).val(1); } var t = totalPrice(); alert("修改成功！，您的商品总金额是" + t + "元"); }); //清空购物车 $("#removeAllProduct") .click( function() { //注意清除的先后顺序 $("#myTableProduct").next().remove(); $("#myTableProduct").remove(); $(".shopping_list_border") .append( "<div class='empty_product'><div>您还没有挑选商品，<a href='index.html'>去挑选看看>></a></div></div>"); }); }); </script> </head> <body> <header id="header"> <div class="header_top"> <div class="header_top_left"> 您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html" target="_parent">免费注册</a>] </div> <div class="header_top_right"> <ul> <li><a href="#" target="_self">客户服务</a></li> <li>|</li> <li id="menu"><a href="#" target="_self">新手入门</a> <img src="images/arrow_down.gif" alt="arrow" /> <div id="dd_menu_top_down"> <a href="#" target="_self">购物保障</a><br /> <a href="#" target="_self">购物流程</a><br /> <a href="#" target="_self">会员介绍</a><br /> <a href="#" target="_self">常见问题</a><br /> </div></li> <li>|</li> <li><a href="#" target="_self">礼品卡</a></li> <li>|</li> <li><a href="#" target="_self">我的订单</a></li> <li>|</li> <li><a href="#" target="_self">我的账户</a></li> <li>|</li> <li><a href="shopping.html" target="_parent">购物车</a></li> <li><img src="images/header_shop.gif" alt="shopping" /></li> </ul> </div> </div> </header> <div class="header_middle"> <div class="logo"> <img src="images/logo.png" alt="logo" /> </div> <div class="search"> <input type="text" placeholder="请输入搜索关键字"><input type="button"> </div> </div> <nav id="nav"> <ul> <li><a href="#"> 全部商品分类</a></li> <li><a href="#"> 首页</a></li> <li><a href="#"> 图书</a></li> <li><a href="#"> 特价</a></li> <li><a href="#"> 团购</a></li> </ul> </nav> <!--中间部分开始--> <div id="main"> <div> <img src="images/shopping_myshopping.gif" alt="shopping" /> <a href="#">全场免运费活动中</a> </div> <!--为您推荐商品开始--> <div class="shopping_commend"> <div class="shopping_commend_left">根据您挑选的商品，蔚蓝为您推荐</div> <div class="shopping_commend_right"> <img src="images/shopping_arrow_up.gif" alt="shopping" id="shopping_commend_arrow" /> </div> </div> <div id="shopping_commend_sort"> <div class="shopping_commend_sort_left"> <ul> <li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li> <li class="shopping_commend_list_2">￥39.00</li> <li class="shopping_commend_list_3">￥29.30</li> <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li> </ul> <ul> <li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（蔚蓝网独家首发）</a></li> <li class="shopping_commend_list_2">￥28.00</li> <li class="shopping_commend_list_3">￥19.40</li> <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li> </ul> <ul> <li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危机下房地产行...</a></li> <li class="shopping_commend_list_2">￥32.80</li> <li class="shopping_commend_list_3">￥25.10</li> <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li> </ul> <ul> <li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li> <li class="shopping_commend_list_2">￥36.00</li> <li class="shopping_commend_list_3">￥27.70</li> <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li> </ul> </div> <div class="shopping_commend_sort_mid"></div> <div class="shopping_commend_sort_left"> <ul> <li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li> <li class="shopping_commend_list_2">￥59.00</li> <li class="shopping_commend_list_3">￥47.20</li> <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li> </ul> <ul> <li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（马未都、王刚推荐!央...</a></li> <li class="shopping_commend_list_2">￥34.80</li> <li class="shopping_commend_list_3">￥20.60</li> <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li> </ul> <ul> <li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说：一...</a></li> <li class="shopping_commend_list_2">￥39.80</li> <li class="shopping_commend_list_3">￥30.50</li> <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li> </ul> <ul> <li class="shopping_commend_list_1">·<a href="#" class="blue">国戏（以麻将术语解读宦海沉浮...</a></li> <li class="shopping_commend_list_2">￥25.00</li> <li class="shopping_commend_list_3">￥17.30</li> <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li> </ul> </div> </div> <div class="shopping_list_top">您已选购以下商品</div> <div class="shopping_list_border"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="shopping_list_title"> <td class="shopping_list_title_1">商品名</td> <td class="shopping_list_title_2">单品积分</td> <td class="shopping_list_title_3">市场价</td> <td class="shopping_list_title_4">蔚蓝价</td> <td class="shopping_list_title_5">数量</td> <td class="shopping_list_title_6">删除</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTableProduct"> <tr class="shopping_product_list" id="shoppingProduct_01"> <td class="shopping_product_list_1"><a href="#" class="blue">私募（首部披露资本博弈秘密的金融...</a></td> <td class="shopping_product_list_2"><label>189</label></td> <td class="shopping_product_list_3">￥<label>32.00</label></td> <td class="shopping_product_list_4">￥<label>18.90 </label>(59折) </td> <td class="shopping_product_list_5"><input type="text" value="1" /></td> <td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td> </tr> <tr class="shopping_product_list" id="shoppingProduct_02"> <td class="shopping_product_list_1"><a href="#" class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td> <td class="shopping_product_list_2"><label>173</label></td> <td class="shopping_product_list_3">￥<label>28.00</label></td> <td class="shopping_product_list_4">￥<label>17.30</label>(62折) </td> <td class="shopping_product_list_5"><input type="text" value="1" /></td> <td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td> </tr> <tr class="shopping_product_list" id="shoppingProduct_03"> <td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td> <td class="shopping_product_list_2"><label>154</label></td> <td class="shopping_product_list_3">￥<label>24.80</label></td> <td class="shopping_product_list_4">￥<label>15.40</label> (62折) </td> <td class="shopping_product_list_5"><input type="text" value="2" /></td> <td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td> </tr> <tr class="shopping_product_list" id="shoppingProduct_04"> <td class="shopping_product_list_1"><a href="#" class="blue">福玛特双桶洗衣机XPB20-07S</a></td> <td class="shopping_product_list_2"><label>358</label></td> <td class="shopping_product_list_3">￥<label>458.00</label></td> <td class="shopping_product_list_4">￥<label>358.00</label> (78折) </td> <td class="shopping_product_list_5"><input type="text" value="1" /></td> <td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td> </tr> <tr class="shopping_product_list" id="shoppingProduct_05"> <td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web开发 （原书第4版）</a></td> <td class="shopping_product_list_2"><label>712</label></td> <td class="shopping_product_list_3">￥<label>95.00</label></td> <td class="shopping_product_list_4">￥<label>71.20</label> (75折) </td> <td class="shopping_product_list_5"><input type="text" value="1" /></td> <td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td> </tr> <tr class="shopping_product_list" id="shoppingProduct_06"> <td class="shopping_product_list_1"><a href="#" class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）</td> <td class="shopping_product_list_2"><label>10</label></td> <td class="shopping_product_list_3">￥<label>198.00</label></td> <td class="shopping_product_list_4">￥<label>130.70</label> (66折) </td> <td class="shopping_product_list_5"><input type="text" value="1" /></td> <td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td> </tr> </table> <div class="shopping_list_end"> <div> <a id="removeAllProduct" href="javascript:void(0);">清空购物车</a> </div> <ul> <li class="shopping_list_end_1"><input name="" type="image" src="images/shopping_balance.gif" /></li> <li class="shopping_list_end_2">￥<label id="product_total"></label></li> <li class="shopping_list_end_3">商品金额总计：</li> <li class="shopping_list_end_4">您共节省金额：￥<label class="shopping_list_end_yellow" id="product_save"></label><br /> 可获商品积分：<label class="shopping_list_end_yellow" id="product_integral"></label> </li> </ul> </div> </div> </div> <!--网站版权部分开始--> <footer id="footer"> <div class="footer_top"> <a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a> </div> <div class="footer_end"> Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权" style="vertical-align: middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号 </div> </footer> </body> </html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/27946.html
