商城购物车代码Word下载.docx

1、input class=check-all check type=checkbox 全选/th商品单价数量小计操作/theadtbodytd class=check-one check/tdgoodsimg src=images/1.jpg alt=spanCasio/卡西欧 EX-TR350price5999.88countspan class=reducecount-inputtext value=1add+subtotaloperationdelete删除images/2.jpgCanon/佳能 PowerShot SX50 HS3888.50images/3.jpgSony/

2、索尼 DSC-WX3001428.50images/4.jpgFujifilm/富士 instax mini 25640.60/table foot id=label class=fl select-allinput type= class=a class=fl deletedeleteAlljavascript:;/afr closing结 算fr total合计：￥span id=priceTotal0.00fr selectedselected已选商品selectedTotal0件arrow uparrow down取消选择arrow/html样式页面Style.csscharset u

3、tf-8*margin:0;padding:list-style-type:none;acolor:#666;text-decoration:tableborder-collapse:collapse;border-spacing:border:bodycolor:font:12px/180% Arial, Helvetica, sans-serif, 新宋体clearfix:aftercontent:.display:block;height:clear:both;visibility:hidden.clearfixdisplay:inline-table*html .clearfixhei

4、ght:1%block*+html .clearfixmin-height:.flfloat:left;.frfloat:right;.catboxwidth:940px;margin:0 auto;.catbox tabletext-align:center;width:100%;.catbox table th,.catbox table tdborder:1px solid #CADEFF;.catbox table thbackground:#e2f2ff;border-top:1px solid #a7cbff;30px;.catbox table tdpadding:10px;co

5、lor:#444;.catbox table tbody tr:hoverbackground:RGB（238,246,255）;.checkboxwidth:60px;.goodswidth:300px;.goods spanwidth:180px;margin-top:20px;text-align:float:.goods imgwidth:100px;80px;margin-right:.pricewidth:130px;.countwidth:90px;.count .add, .count input, .count .reducefloat:-1px;position:relat

6、ive;z-index:.count .add, .count .reduceheight:23px;17px;1px solid #e5e5e5;background:#f0f0f0;line-height:.count .add:hover, .count .reduce:hovercolor:#f50;3;border-color:#f60;cursor:pointer;.count inputwidth:50px;15px;1px solid #aaa;#343434;4px 0;background-color:#fff;2;.subtotalwidth:150px;red;font

7、-weight:bold;.operation span:hover,a:hovercursor:underline;.footmargin-top:48px;1px solid #c8c8c8;#eaeaea;background-image:linear-gradient（RGB（241,241,241）,RGB（226,226,226）;8;.foot div, .foot aline-height:.foot .select-allwidth:padding-left:5px;.foot .closingborder-left:#000;RGB（238,238,238）;.foot .

8、totalmargin:0 20px;.foot #priceTotal, .foot #selectedTotalcolor:font-family:Microsoft Yahei.foot .selectedcursor:.foot .selected .arrowposition:top:-3px;margin-left:3px;.foot .selected .downposition:.show .selected .downdisplay:inline;.show .selected .updisplay:.foot .selected:hover .arrowcolor:.foo

9、t .selected-viewwidth:935px;absolute;auto;#ffffff;9;bottom:left:.show .selected-viewdisplay:.foot .selected-view divheight:.foot .selected-view .arrowfont-size:16px;#c8c8c8;right:330px;-9px;.foot .selected-view .arrow spancolor:0px;1px;#selectedViewListpadding:10px 20px 10px 20px;#selectedViewList d

10、ivdisplay:inline-block;1px solid #ccc;#selectedViewList div imgwidth:#selectedViewList div spandisplay:font-size:12px;18px;#selectedViewList div:hover spandisplay:Js页面 demo.js/* * Created by an.han on 13-12-17. */window.onload = function （） if （!document.getElementsByClassName） document.getElementsB

11、yClassName = function （cls） var ret = ; var els = document.getElementsByTagName（*）; for （var i = 0, len = els.length; i =0 | elsi.className.indexOf（ + cls + + cls） =0） ret.push（elsi）; return ret; var table = document.getElementById（cartTable / 购物车表格 var selectInputs = document.getElementsByClassName

12、（check / 所有勾选框 var checkAllInputs = document.getElementsByClassName（check-all） / 全选框 var tr = table.children1.rows; /行 var selectedTotal = document.getElementById（selectedTotal /已选商品数目容器 var priceTotal = document.getElementById（priceTotal /总计 var deleteAll = document.getElementById（deleteAll / 删除全部按

13、钮 var selectedViewList = document.getElementById（selectedViewList /浮层已选商品列表容器 var selected = document.getElementById（selected /已选商品 var foot = document.getElementById（foot / 更新总数和总价格，已选浮层 function getTotal（） var seleted = 0; var price = 0; var HTMLstr = for （var i = 0, len = tr.length; if （tri.getEl

14、ementsByTagName（input）0.checked） tri.className = on seleted += parseInt（tri.getElementsByTagName（）1.value）; price += parseFloat（tri.cells4.innerHTML）; HTMLstr += + tri.getElementsByTagName（img）0.src + del index= + i + else selectedTotal.innerHTML = seleted; priceTotal.innerHTML = price.toFixed（2）; s

15、electedViewList.innerHTML = HTMLstr; if （seleted = 0） foot.className = / 计算单行价格 function getSubtotal（tr） var cells = tr.cells; var price = cells2; /单价 var subtotal = cells4; /小计td var countInput = tr.getElementsByTagName（）1; /数目input var span = tr.getElementsByTagName（span /-号 /写入HTML subtotal.inner

16、HTML = （parseInt（countInput.value） * parseFloat（price.innerHTML）.toFixed（2）; /如果数目只有一个，把-号去掉 if （countInput.value = 1） span.innerHTML = else- / 点击选择框 for（var i = 0; selectInputs.length; i+ ） selectInputsi.onclick = function （） if （this.className.indexOf（= 0） /如果是全选，则吧所有的选择框选中 for （var j = 0; j j+） s

17、electInputsj.checked = this.checked;this.checked） /只要有一个未勾选，则取消全选框的选中状态 for （var i = 0; checkAllInputs.length; checkAllInputsi.checked = false; getTotal（）;/选完更新总计 / 显示已选商品弹层 selected.onclick = function （） if （selectedTotal.innerHTML != 0） foot.className = （foot.className = ?foot show : /已选商品弹层中的取消选择按钮 selectedViewList.onclick = function （e） var e = e | window.event; var el = e.srcElement; if （el.className=del） var input = trel.getAttribute（index）.getElementsByTagName（）0 input.checked = fal