js网上商城案例_第1页
js网上商城案例_第2页
js网上商城案例_第3页
js网上商城案例_第4页
js网上商城案例_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、购物车cart.csscharset "utf-8"/* CSS Document */*中间导航*/#navwidth: 985px; /*内容固定宽度*/margin: 0px auto; /*固定宽度且居中*/height:39px;#middle #allnav width: 100%; /*自适应宽度，占据整个屏幕*/height: 39px;background-color: #ff7701;#nav ul li float: left;#nav ul li a float: left; /*兼容ie6*/padding: 0px 16px;height: 39

2、px;line-height: 39px;display: block;font-weight: bold;font-size: 15px;color: white;#nav ul li a:hover background-color: #ff8c00#nav ul li a.category background-image: url(./images/arrow-down.gif);background-repeat: no-repeat;background-position: right;/*导航菜单的二级菜单用到定位*/#nav ul li.menuList position: r

3、elative;#nav ul li.menuList ul background-color: #ff7701;text-align: center;top: 39px; /*脱离原文档流*/left: 0px;position: absolute;width: 123px;display:none;#nav ul li.menuList:hover uldisplay:block;#nav ul li ul li float: none;#nav ul li ul li a float: none#middle #content width:985px; margin:20px auto;

4、/*中间第二块：订单表*/#middle #ordertablepadding:20px; /*和边框有间隔*/border:1px solid #dedede;overflow:hidden; /*解决父元素的浮动塌陷*/#ordertable ul lifloat:left;height:78px; /*和购物车图像的高度一致*/font:bold 25px/78px Verdana, Geneva, sans-serif;#ordertable ul li.stepbackground:url(./images/cart/step1.jpg) no-repeat center;width

5、:679px;margin-left:30px; #ordertable .btn border:1px solid #dedede; background-color:white; width:16px; height:16px;#ordertable .txtwidth:60px;height:30px;border:1px solid #dedede;text-align:center;font:bold 15px/30px Verdana, Geneva, sans-serif;#ordertable .txt:hoverborder:1px solid red#ordertable

6、tableborder:1px solid #dedede;border-collapse:collapse;width:100%;clear:both;#ordertable table trheight:50px;border-bottom:1px dashed #dedede;#ordertable table td,#ordertable thtext-align:center;vertical-align:central;/*对单元格的宽度细调*/#ordertable table td.itemwidth:260px;height:60px;text-align:left;#ord

7、ertable table td.item imgmargin-right:10px; vertical-align:baseline;/*汇总的一行*/#ordertable table tr td.caltext-align:right;#ordertable table tr td.cal spanfont:bold 25px Verdana, Geneva, sans-serif;color:orange;/*提交订单的按钮*/#ordertable ptext-align:right;/*最近浏览*/#middle #lastviewmargin-top:20px;border:1p

8、x solid #dedede;padding:20px;overflow:hidden; /*浮动塌陷*/#lastview dlfloat:left;height:222px;width:210px;margin-right:20px;#lastview dl ddline-height:25px;#lastview dl dd spanfont:bold 15px Verdana, Geneva, sans-serif;color:#C30;#lastview dl dd.pricefloat:left;#lastview dl dd.numfloat:right#lastview dl

9、 dd.add clear:both; float:right; #lastview dl dd.add acolor:#F90#lastview dl dd.add a:hovertext-decoration:underline;#lastview dl dd.add span background:url(./images/icon.gif) 0px -85px; width:18px; height:33px; display:block; float:left; margin-top:2px; global.cssbody font-family:verdana,helvetica,

10、arial,sans-serif; padding:20px; font-size:12px; margin:0;* margin:0px; padding:0px; font-size:12px; a img border:none a text-decoration:none; color:Black; a:hover color:Orange; ul list-style:none; h2 font-size:18px; font-weight:bold; margin:0; margin-bottom:15px;.demo-infopadding:0 0 12px 0;.demo-ti

11、pdisplay:none;cart.html<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/

12、html; charset=utf-8" /><title>购物车</title><link href="css/global.css" type="text/css" rel="stylesheet" /><link href="css/cart.css" type="text/css" rel="stylesheet" /><style type="text/css">/*放大

13、图片的样式*/img#imgTip position: absolute;border: 1px solid #ccc;padding: 3px;width: 120px;height: 85px;display: none;background-color: #eee;</style><script src="js/jquery-1.11.0.min.js"></script><script type="text/javascript">function check() var cb1 = documen

14、t.getElementById("allCb");var chs = document.getElementsByName("item");for (var i = 0; i < chs.length; i+) chsi.checked = cb1.checked;$(function() var x = 5,y = 15; /初始化提示图片位置/小图片鼠标移动事件$("table img").mouseover(function(e) $("#imgTip").attr("src",

15、this.src) /设置图片的src属性.css("top": (e.pageY + y) + "px","left": (e.pageX + x) + "px") /设置提示图片的位置.show(1000); /显示图片);/小图片移除事件$("table img").mouseout(function() $("#imgTip").hide(); /隐藏图片);$(".btnMinus").click(function() /绑定单击减少数量的按钮事

16、件var txtObj = $(this).siblings("inputtype='text'"); /获取按钮type='text'的兄弟var number = parseInt(txtObj.val();if (number > 1) txtObj.val(number - 1);/小计某个商品的总价calPrice($(this), number - 1);calTotalPrice(););$(".btnAdd").click(function() /绑定单击增加数量的按钮事件var txtObj = $

17、(this).siblings("inputtype='text'"); /获取按钮type='text'的兄弟var number = parseInt(txtObj.val();txtObj.val(number + 1);/小计某个商品的总价calPrice($(this), number + 1);calTotalPrice();););/小计团购项目的价格function calPrice($BtnObj, number) var $tdObj = $BtnObj.parent().next(); /获取显示单价的td单元格var

18、price = parseFloat($tdObj.text().substr(1); /获取单价var $tdObjTotal = $tdObj.next(); /获取紧跟的同胞元素，即显示商品小计的单元格var total = price * number; /计算总价$tdObjTotal.html("&yen;" + total.toFixed(2); /商品小计小数点保留两位后显示/计算所有团购项目的总价格function calTotalPrice() var sum = 0; /保存总价/遍历表格的索引是5的单元格$("#tabOrder t

19、dtitle='price'").each(function() sum = sum + parseFloat($(this).text().substr(1); /价格的累加);/显示总价$("#spanTotal").html("&yen;" + sum);</script></head><body><div id="content"><div id="ordertable"><ul><li>&

20、lt;img src="img/cart/g1.jpg" /></li><li>我的购物车</li><li class="step"></li></ul><form><table id="tabOrder"><tr><th><input type="checkbox" id="allCb" onclick="check()" /> 全选&l

21、t;/th><th>项目</th><th>状态</th><th>类型/数量</th><th>单价</th><th>小计</th><th></th></tr><tr><td><input type="checkbox" name="item" /></td><td class="item"><a href=&qu

22、ot;detail.html"> <img src="img/cart/item1.jpg" align="left" />欢乐空间量贩式KTV：欢唱套餐2选1，国家法定节假日需到店另付20元，可升级</a></td><td>可购买</td><td><input type="button" value="-" class="btn btnMinus" /><input class="

23、;txt" type="text" value="1" disabled="disabled" /><input type="button" value="+" class="btn btnAdd" /></td><td>&yen;39.9</td><td title="price">&yen;39.9</td><td><a href=

24、"#">删除</a></td></tr><tr><td><input type="checkbox" name="item" /></td><td class="item"><a href="detail.html"> <img src="img/cart/item2.jpg" align="left" />途乐时尚主题量贩式KTV

25、：任选1小时欢唱，可升级，提供免费WiFi</a></td><td>可购买</td><td><input type="button" value="-" class="btn btnMinus" /><input class="txt" type="text" value="1" disabled="disabled" /><input type="butt

26、on" value="+" class="btn btnAdd" /></td><td>&yen;3</td><td title="price">&yen;3</td><td><a href="#">删除</a></td></tr><tr><td colspan="7" class="cal">已选&l

27、t;span>2</span>件商品 应付总额： <span id="spanTotal">¥42.9</span></td></tr></table><p><input type="image" src="img/cart/tj.png" /></p></form></div></div><img id="imgTip" /></body

28、></html>2 商品简介<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01/EN""/TR/html4/strict.dtd"><html xmlns="/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charse

29、t=utf-8" /><title></title><style type="text/css">dl height: 200px;width: 400px;dt float: left;margin-right: 20px;dd line-height: 20px;</style><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script typ

30、e="text/javascript">$(function()$("span").css("color","red");$("#dlmovie>dd>span:eq(1)").css("color","#FF7701");$("#dlmovie a:not(name)").css("text-decoration","none"););</script></h

31、ead><body><dl id="dlmovie"><dt><img src="img/frozen.jpg" width="150" height="200"/></dt><dd><span>评分：</span><span>8.4</span></dd><dd><span>别名:</span> 冰雪大冒险 / 魔雪奇缘</dd>

32、<dd><span>演员：</span><a href="#">伊迪娜·门泽尔 </a></dd><dd><span>导演：</span><a href="#">克里斯·巴克Jennifer Lee </a></dd><dd><span>地区：</span>美国</dd><dd><span>简介：</span>

33、Frozen讲述一个诅咒令王国被冰天雪地永久覆盖，乐观无畏的安娜（由克里斯汀·贝尔配音）和一个大胆的.</dd><dd><a href="#" name="amore">more</a></dd></dl></body></html>3 商品分类<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01/EN""/TR/html4/strict.dtd&qu

34、ot;><html xmlns="/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">div#book border: 1px solid #666666;width:

35、301px;overflow: hidden;div#head background-color: #eeeeee;padding: 5px;height: 25px;cursor: hand;div#head h3 padding: 0px;margin: 0px;float: left;div#head img float: right;margin-top: 3px;cursor: pointer;div#content padding: 8px;div#content ul list-style: none;margin: 0px;padding: 0px;div#content ul

36、 li float: left;width: 95px;height: 23px;line-height: 23px;div#foot float: right;padding: 5px;</style><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript">$(function()$("#head img").click(

37、function()var state = $("#content").css("display");if(state="block")/把中间的层隐藏$("#content,#foot").css("display","none");/更换img标签的图标$(this).attr("src","img/jt1.jpg");else/把中间的层隐藏$("#content,#foot").css("displ

38、ay","block");/更换img标签的图标$(this).attr("src","img/jt2.jpg");););</script></head><body><div id="book"><div id="head"><h3>图书分类</h3><img src="img/jt2.jpg" /></div><div id="conten

39、t"><ul><li><a href="#">小说</a></li><li><a href="#">文艺</a></li><li><a href="#">青春</a></li><li><a href="#">少儿</a></li><li><a href="#"&

40、gt;生活</a></li><li><a href="#">社科</a></li><li><a href="#">管理</a></li><li><a href="#">计算机</a></li><li><a href="#">教育</a></li><li><a href="#&

41、quot;>工具书</a></li><li><a href="#">工具书</a></li><li><a href="#">其他类</a></li></ul></div><div id="foot"><a href="#">更多>></a></div></div></body><

42、/html>4 地址选择<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01/EN""/TR/html4/strict.dtd"><html xmlns="/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8&

43、quot; /><title></title><script type="text/javascript">var pro = "北京市","上海市","湖北省"var procity = "朝阳区","海淀区","房山区","浦东新区","静安区","武汉市","宜昌市","襄阳市"function sltLoad

44、()var sltpro = document.getElementById("sltprovince");for(var i=0; i<pro.length; i+)var nd = document.createElement("option");nd.innerHTML = proi;nd.value = i;sltpro.appendChild(nd);function sltChange(slt)var city = document.getElementById("sltcity");city.options.len

45、gth = 0;for (var i = 0; i < procityslt.value.length; i+) var nd = document.createElement("option");nd.innerHTML = procityslt.valuei;city.appendChild(nd);window.onload = sltLoad;</script></head><body><img id="img1" src="img/bg1.gif" /><div i

46、d="divcontent"></div><form><input id="txtNum" type="text" /><input id="txtNum2" type="text" />省：<select id="sltprovince" onchange="sltChange(this)"><option selected="selected" value=&q

47、uot;-1">请选择</option></select>市：<select id="sltcity"></select><br /><input id="btnOK" type="button" value="确定" onclick="btn1()" /></form></body></html>5 商品数目<!DOCTYPE html PUBLIC "-

48、/W3C/DTD HTML 4.01/EN""/TR/html4/strict.dtd"><html xmlns="/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>第七章 Jquery</title>

49、;<style type="text/css"></style><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript">$(function()$("dl>dd>inputvalue='-'").click(function()var $txt = $(this).

50、next("input");var num = parseInt($txt.val();if(num-1>=0)$txt.val(num-1););$("dl>dd>inputvalue='+'").click(function()var $txt = $(this).prev("input");var num = parseInt($txt.val();$txt.val(num+1);););</script></head><body><form>&l

51、t;dl><dt></dt><dd><input type="button" value="-" /><input type="text" value="1" /><input type="button" value="+" /></dd></dl><dl><dt></dt><dd><input type="bu

52、tton" value="-" /><input type="text" value="1" /><input type="button" value="+" /></dd></dl></form></body></html>6 登录界面<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "ht

53、tp://TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>淘淘网会员登录</title><link href="css/global.css"

54、; type="text/css" rel="stylesheet" /><link href="css/login.css" type="text/css" rel="stylesheet" /><style type="text/css"></style><script type="text/javascript">function changeBtn()var btns=document.getE

55、lementsByName("btnLogin"); for(var i=0;i<btns.length;i+) btnsi.onmouseover=function() this.src="img/login_over.jpg" btnsi.onmouseout=function() this.src="img/login.jpg" function changeRegBtn() var btns = document.getElementsByName("btnReg"); for (var i = 0;

56、 i < btns.length; i+) btnsi.onmouseover = function () this.src = "img/reg_over.jpg" btnsi.onmouseout = function () this.src = "img/register.jpg" function setTab(id)if(id=1)document.getElementById("emailreg").style.display="block"document.getElementById(&quo

57、t;phonereg").style.display="none"document.getElementById("one1").className="current"document.getElementById("one2").className=""if(id=2)document.getElementById("emailreg").style.display="none"document.getElementById("pho

58、nereg").style.display="block"document.getElementById("one2").className="current"document.getElementById("one1").className="" function setLogTab(id) if (id = 1) document.getElementById("email").style.display = "block" document

59、.getElementById("phone").style.display = "none" document.getElementById("logone1").className = "current" document.getElementById("logone2").className = "" if (id = 2) document.getElementById("email").style.display = "none&quo

60、t; document.getElementById("phone").style.display = "block" document.getElementById("logone2").className = "current" document.getElementById("logone1").className = "" </script></head><body onload="changeBtn(),changeRegBt

61、n()"><iframe src="head.html" width="100%" height="104" scrolling="no" frameborder="0"></iframe><div id="middle"> <div id="allnav"> <div id="nav"> <ul> <!-组织一级菜单-> <li

62、class="menuList"><a href="#" class="category">全部商品分类</a> <ul> <li><a href="#">美食</a></li> <li><a href="#">旅游</a></li> <li><a href="#">酒店</a></li> &

63、lt;li><a href="#">电影</a></li> <li><a href="#">KTV</a></li> <li><a href="#">时尚</a></li> <li><a href="#">生活服务</a></li> </ul> </li> <li><a href="

64、;#">首页</a></li> <li><a href="#">团购</a></li> <li><a href="#">美食</a></li> <li><a href="#">电影</a></li> <li><a href="#">KTV</a></li> <li><a href="#">酒店订票</a></li> <li><a href="#">购物</a></li> <li><a href="#">品牌特卖</a></li> </ul> </div> </div>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论