商城购物车代码.doc

首页 demo.html购物车 全选商品单价数量小计操作Casio/卡西欧 EX-TR3505999.88+5999.88删除Canon/佳能 PowerShot SX50 HS3888.50+3888.50删除Sony/索尼 DSC-WX3001428.50+1428.50删除Fujifilm/富士 instax mini 25640.60+640.60删除 全选删除结 算合计：￥0.00已选商品0件取消选择样式页面Style.csscharset utf-8;*margin:0;padding:0;list-style-type:none;acolor:#666;text-decoration:none;tableborder-collapse:collapse;border-spacing:0;border:0;bodycolor:#666;font:12px/180% Arial, Helvetica, sans-serif, 新宋体;clearfix:aftercontent:.;display:block;height:0;clear:both;visibility:hidden.clearfixdisplay:inline-table*html .clearfixheight:1%.clearfixdisplay:block*+html .clearfixmin-height:1%.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:3px solid #a7cbff;height:30px;.catbox table tdpadding:10px;color:#444;.catbox table tbody tr:hoverbackground:RGB(238,246,255);.checkboxwidth:60px;.goodswidth:300px;.goods spanwidth:180px;margin-top:20px;text-align:left;float:left;.goods imgwidth:100px;height:80px;margin-right:10px;float:left;.pricewidth:130px;.countwidth:90px;.count .add, .count input, .count .reducefloat:left;margin-right:-1px;position:relative;z-index:0;.count .add, .count .reduceheight:23px;width:17px;border:1px solid #e5e5e5;background:#f0f0f0;text-align:center;line-height:23px;color:#444;.count .add:hover, .count .reduce:hovercolor:#f50;z-index:3;border-color:#f60;cursor:pointer;.count inputwidth:50px;height:15px;line-height:15px;border:1px solid #aaa;color:#343434;text-align:center;padding:4px 0;background-color:#fff;z-index:2;.subtotalwidth:150px;color:red;font-weight:bold;.operation span:hover,a:hovercursor:pointer;color:red;text-decoration:underline;.footmargin-top:10px;color:#666;height:48px;border:1px solid #c8c8c8;background-color:#eaeaea;background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226);position:relative;z-index:8;.foot div, .foot aline-height:48px;height:48px;.foot .select-allwidth:100px;height:48px;line-height:48px;padding-left:5px;color:#666;.foot .closingborder-left:1px solid #c8c8c8;width:100px;text-align:center;color:#000;font-weight:bold;background:RGB(238,238,238);cursor:pointer;.foot .totalmargin:0 20px;cursor:pointer;.foot #priceTotal, .foot #selectedTotalcolor:red;font-family:Microsoft Yahei;font-weight:bold;.foot .selectedcursor:pointer;.foot .selected .arrowposition:relative;top:-3px;margin-left:3px;.foot .selected .downposition:relative;top:3px;display:none;.show .selected .downdisplay:inline;.show .selected .updisplay:none;.foot .selected:hover .arrowcolor:red;.foot .selected-viewwidth:935px;border:1px solid #c8c8c8;position:absolute;height:auto;background:#ffffff;z-index:9;bottom:48px;left:-1px;display:none;.show .selected-viewdisplay:block;.foot .selected-view divheight:auto;.foot .selected-view .arrowfont-size:16px;line-height:100%;color:#c8c8c8;position:absolute;right:330px;bottom:-9px;.foot .selected-view .arrow spancolor:#ffffff;position:absolute;left:0px;bottom:1px;#selectedViewListpadding:10px 20px 10px 20px;#selectedViewList divdisplay:inline-block;position:relative;width:100px;height:80px;border:1px solid #ccc;margin:10px;float:left;#selectedViewList div imgwidth:100px;height:80px;margin-right:10px;float:left;#selectedViewList div spandisplay:none;color:#ffffff;font-size:12px;position:absolute;top:0px;right:0px;width:60px;height:18px;line-height:18px;text-align:center;background:#000;cursor:pointer;#selectedViewList div:hover spandisplay:block;Js页面 demo.js/* * Created by an.han on 13-12-17. */window.onload = function () if (!document.getElementsByClassName) document.getElementsByClassName = function (cls) var ret = ; var els = document.getElementsByTagName(*); for (var i = 0, len = els.length; i =0 | elsi.className.indexOf( + cls + ) =0 | elsi.className.indexOf( + cls) =0) ret.push(elsi); return ret; var table = document.getElementById(cartTable); / 购物车表格 var selectInputs = document.getElementsByClassName(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); / 删除全部按钮 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; i len; i+) if (tri.getElementsByTagName(input)0.checked) tri.className = on;seleted += parseInt(tri.getElementsByTagName(input)1.value);price += parseFloat(tri.cells4.innerHTML);HTMLstr += 取消选择else tri.className = ;selectedTotal.innerHTML = seleted;priceTotal.innerHTML = price.toFixed(2);selectedViewList.innerHTML = HTMLstr;if (seleted = 0) foot.className = foot; / 计算单行价格 function getSubtotal(tr) var cells = tr.cells; var price = cells2; /单价 var subtotal = cells4; /小计td var countInput = tr.getElementsByTagName(input)1; /数目input var span = tr.getElementsByTagName(span)1; /-号 /写入HTML subtotal.innerHTML = (parseInt(countInput.value) * parseFloat(price.innerHTML).toFixed(2); /如果数目只有一个，把-号去掉 if (countInput.value = 1) span.innerHTML = ; else span.innerHTML = -; / 点击选择框 for(var i = 0; i = 0) /如果是全选，则吧所有的选择框选中 for (var j = 0; j selectInputs.length; j+) selectInputsj.checked = this.checked; if (!this.checked) /只要有一个未勾选，则取消全选框的选中状态 for (var i = 0; i checkAllInputs.length; i+) checkAllInputsi.checked = false; getTotal();/选完更新总计 / 显示已选商品弹层 selected.onclick = function () if (selectedTotal.innerHTML != 0) foot.className = (foot.className = foot ? foot show : foot); /已选商品弹层中的取消选择按钮 selectedViewList.onclick = function (e) var e = e | window.event; var el = e.srcElement; if (el.className=del) var input = trel.getAttribute(index).getElementsByTagName(input)0 input.checked = false; input.onclick(); /为每行元素添加事件 for (var i = 0; i 1) countInout.value = value - 1; getSubtotal(this); break; case delete: /点击了删除 var conf = confirm(确定删除此商品吗？); if (conf) this.parentNo