分享用一下周末做的购物车案例

嘛，先上代码：
html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><link href="css/buybuybuy.css" type="text/css" rel="stylesheet"><script src="js/common.js"></script>
</head>
<body>
<div><div class="logo"><img src="images/taobao_logo.gif"></div><div class="location">您的位置：<a href="javascript:void(0)">首页</a> > <a href="javascript:void(0)">我的淘宝</a> > 我的购物车</div><div class="course"><div class="courseEdge leftEdge-selected"></div><div class="courses-selected">1.查看购物车</div><div class="between betweenLeft-selected"><div class="between betweenRight"></div></div><div class="courses">2.确认订单信息</div><div class="between betweenLeft"><div class="between betweenRight"></div></div><div class="courses">3.付款到支付宝</div><div class="between betweenLeft"><div class="between betweenRight"></div></div><div class="courses">4.确认收货</div><div class="between betweenLeft"><div class="between betweenRight"></div></div><div class="courses">5.评价</div><div class="courseEdge rightEdge"></div></div><table><thead><tr><td width="49"><input type="checkbox" id="checkAll">全选</td><td width="349">店铺宝贝</td><td width="79">单件积分</td><td width="79">单价（元）</td><td width="99">数量</td><td width="79">小计（元）</td><td width="59">操作</td></tr><tr><td colspan="7"><hr color="#a5c3e6" size="3"></td></tr></thead><tbody><tr class="shop"><td colspan="7">店铺：<a href="javascript:void(0)">纤巧百媚时尚鞋纺</a>卖家：<a href="javascript:void(0)">纤巧百媚</a><a href="javascript:void(0)" class="relation"></a></td></tr><tr class="content"><td><input type="checkbox"></td><td><div class="good"><div class="goodPic"><img src="images/taobao_cart_01.jpg"></div><div class="goodInfo"><div><div class="goodName"><a href="javascript:void(0)">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></div><div>颜色：棕色 尺码：37</div><div>保障：<img src="images/taobao_icon_01.jpg"></div></div></div></div></td><td class="point">5</td><td class="price">138.00</td><td class="amount"><img src="images/taobao_minus.jpg"><input type="text" value="1"><img src="images/taobao_adding.jpg"></td><td class="goodPrice">138</td><td class="delete"><a href="javascript:void(0)">删除</a></td></tr><tr class="shop"><td colspan="7">店铺：<a href="javascript:void(0)">香港我的美丽日记</a>卖家：<a href="javascript:void(0)">lokemick2009</a><a href="javascript:void(0)" class="relation"></a></td></tr><tr class="content"><td><input type="checkbox"></td><td><div class="good"><div class="goodPic"><img src="images/taobao_cart_02.jpg"></div><div class="goodInfo"><div><div class="goodName"><a href="javascript:void(0)">chanel/香奈尔/香奈尔炫亮美丽唇膏3.5g</a></div><div>保障：<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></div></div></div></div></td><td class="point">12</td><td class="price">265.00</td><td class="amount"><img src="images/taobao_minus.jpg"><input type="text" value="1"><img src="images/taobao_adding.jpg"></td><td class="goodPrice">265</td><td class="delete"><a href="javascript:void(0)">删除</a></td></tr><tr class="shop"><td colspan="7">店铺：<a href="javascript:void(0)">实体经营</a>卖家：<a href="javascript:void(0)">林颜店铺</a><a href="javascript:void(0)" class="relation"></a></td></tr><tr class="content"><td><input type="checkbox"></td><td><div class="good"><div class="goodPic"><img src="images/taobao_cart_03.jpg"></div><div class="goodInfo"><div><div class="goodName"><a href="javascript:void(0)">蝶妆海皙蓝清滢粉底液10#（象牙白）</a></div><div>保障：<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></div></div></div></div></td><td class="point">3</td><td class="price">85.00</td><td class="amount"><img src="images/taobao_minus.jpg"><input type="text" value="1"><img src="images/taobao_adding.jpg"></td><td class="goodPrice">85</td><td class="delete"><a href="javascript:void(0)">删除</a></td></tr><tr class="shop"><td colspan="7">店铺：<a href="javascript:void(0)">红豆豆的小屋</a>卖家：<a href="javascript:void(0)">taobao豆豆</a><a href="javascript:void(0)" class="relation"></a></td></tr><tr class="content"><td><input type="checkbox"></td><td><div class="good"><div class="goodPic"><img src="images/taobao_cart_04.jpg"></div><div class="goodInfo"><div><div class="goodName"><a href="javascript:void(0)">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></div><div>保障：<img src="images/taobao_icon_01.jpg"></div></div></div></div></td><td class="point">12</td><td class="price">12.00</td><td class="amount"><img src="images/taobao_minus.jpg"><input type="text" value="1"><img src="images/taobao_adding.jpg"></td><td class="goodPrice">12</td><td class="delete"><a href="javascript:void(0)">删除</a></td></tr></tbody></table><div class="totalPrice">商品总价（不含运费）：<span id="totalPrice">0</span>元</div><div class="totalPoint"><img src="images/taobao_del.jpg" id="delSelected">可获积分：<span id="totalPoint">0</span>点</div><div class="buy"><img src="images/taobao_subtn.jpg"></div>
</div>
</body>
</html>
<script src="js/buybuybuy.js"></script>

js部分：

var ckAll = my$("checkAll");
//获取复选框所在tr
var tr = document.getElementsByClassName('content');
//cks用于存储tr
var cks = new Array();
//获取删除按钮所在
var del = document.getElementsByClassName('delete');
//dels用于存储删除按钮
var dels = new Array();//获取复选框和删除按钮
function getItems() {tr = document.getElementsByClassName('content');cks = [];//存储复选框for (var i = 0; i < tr.length; i++) {cks.push(tr[i].firstElementChild.firstElementChild);}del = document.getElementsByClassName('delete');dels = [];for (var i = 0; i < del.length; i++) {dels.push(del[i].firstElementChild);}
}getItems();//全选功能
ckAll.onclick = function () {for (var i = 0; i < cks.length; i++) {cks[i].checked = this.checked;}calculate();
}
for (var i = 0; i < cks.length; i++) {cks[i].onclick = function () {var flag = true;for (var i = 0; i < cks.length; i++) {if (!cks[i].checked) {flag = false;break;}}ckAll.checked = flag;calculate();}
}//计算价格、积分
function calculate() {var totalPrice = 0;var totalPoint = 0;for (var i = 0; i < tr.length; i++) {if (cks[i].checked) {tr[i].getElementsByClassName('goodPrice')[0].innerText =tr[i].getElementsByClassName('price')[0].innerText *tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value;totalPrice += parseInt(tr[i].getElementsByClassName('goodPrice')[0].innerText);totalPoint += parseInt(tr[i].getElementsByClassName('point')[0].innerText) *tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value;}}my$('totalPrice').innerText = totalPrice;my$('totalPoint').innerText = totalPoint;
}calculate();//删除商品函数
function delEle(good) {console.log('别呀客官！！！！');var parent = good.parentNode.parentNode.parentNode;var child1 = good.parentNode.parentNode;var child2 = good.parentNode.parentNode.previousElementSibling;parent.removeChild(child1);parent.removeChild(child2);
}//给单个按钮设置删除事件
for (var i = 0; i < dels.length; i++) {dels[i].onclick = function () {var r=confirm("你确定删除吗？");if (r==true){delEle(this);getItems();calculate();}};
}
//删除所选
my$('delSelected').onclick = function () {var r=confirm("你确定删除吗？");if (r==true){for (var i = 0; i < cks.length; i++) {if (cks[i].checked) {delEle(cks[i]);}}getItems();calculate();}
}//改变商品数量后重新进行计算
for (let i = 0; i < tr.length; i++) {tr[i].getElementsByClassName('amount')[0].getElementsByTagName('img')[0].onclick = function () {if (tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value != 1) {tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value -= 1;} else {alert('商品数量不能小于1');}calculate();}tr[i].getElementsByClassName('amount')[0].getElementsByTagName('img')[1].onclick = function () {tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value =parseInt(tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value) + 1;calculate();}tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].onkeyup = function () {if (this.value < 1 || isNaN(this.value)) {this.value = 1}calculate();}
}

css部分：

* {margin: 0;padding: 0;text-decoration: none;list-style: none;
}body > div {margin: 0 auto;width: 800px;
}.logo {margin: 10px 0;
}.location {margin: 10px 0;font-size: 12px;
}.course {margin: 10px 0;height: 23px;overflow: hidden;
}.course > div {float: left;text-align: center;line-height: 23px;font-weight: bold;font-size: 12px;
}.courseEdge {width: 3px;height: 23px;background: url("../images/taobao_bg.png") no-repeat;
}.leftEdge {background-position: -12px -69px;
}.leftEdge-selected {background-position: -12px -92px;
}.rightEdge {background-position: -12px -138px;
}.rightEdge-selected {background-position: -12px -161px;
}.courses-selected {width: 146px;height: 23px;background-color: #ff6600;color: white;
}.courses {width: 147px;height: 23px;background-color: #e4e4e4;
}.between {width: 15px;height: 23px;background: url("../images/taobao_bg.png") no-repeat;
}.betweenLeft {background-color: #e4e4e4;
}.betweenLeft-selected {background-color: #ff6600;
}.betweenRight {background-position: 0px 0px;
}.between-right-selected {background-position: 0px -23px;
}table td {border-right: 1px solid white;
}thead td {text-align: center;
}table * {font-size: 12px;
}a.relation {width: 69px;height: 21px;background-image: url("../images/taobao_relation.jpg");display: inline-block;position: relative;top: 3px;
}tr.shop {height: 30px;
}tr.content td {background-color: #d1ecff;height: 80px;padding: 6px;line-height: 80px;text-align: center;
}.good {overflow: hidden;
}.good > div {float: left;
}.goodPic img {vertical-align: middle;
}.goodInfo {width: 240px;height: 80px;overflow: hidden;line-height: 20px;text-align: left;padding: auto 0px;margin-left: 9px;position: relative;display: table;
}.goodInfo > div {display: table-cell;vertical-align: middle;
}.goodName {color: -webkit-link;
}.point {font-weight: bold;
}.amount input {width: 27px;
}.goodPrice {font-weight: bold;color: #ff6600;
}.amount img {cursor: pointer;
}.amount input {text-align: center;
}.totalPrice {text-align: right;font-size: 12px;padding: 10px;
}span {font-size: 15px;font-weight: bold;color: #ff6600;
}.totalPoint {text-align: right;font-size: 12px;padding: 10px 10px 10px 0;position: relative;
}.totalPoint img {cursor: pointer;position: absolute;left: 0;
}.buy {text-align: right;padding: 10px;cursor: pointer;
}

主要时间花在了js部分，在点击各种按钮后，要进行不同的操作，并且还要追加相同的，对商品所在的部分进行重新统计，然后再次计算价格，以及积分，所以计算部分单独写了个函数。

分享用一下周末做的购物车案例

嘛，先上代码：
html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><link href="css/buybuybuy.css" type="text/css" rel="stylesheet"><script src="js/common.js"></script>
</head>
<body>
<div><div class="logo"><img src="images/taobao_logo.gif"></div><div class="location">您的位置：<a href="javascript:void(0)">首页</a> > <a href="javascript:void(0)">我的淘宝</a> > 我的购物车</div><div class="course"><div class="courseEdge leftEdge-selected"></div><div class="courses-selected">1.查看购物车</div><div class="between betweenLeft-selected"><div class="between betweenRight"></div></div><div class="courses">2.确认订单信息</div><div class="between betweenLeft"><div class="between betweenRight"></div></div><div class="courses">3.付款到支付宝</div><div class="between betweenLeft"><div class="between betweenRight"></div></div><div class="courses">4.确认收货</div><div class="between betweenLeft"><div class="between betweenRight"></div></div><div class="courses">5.评价</div><div class="courseEdge rightEdge"></div></div><table><thead><tr><td width="49"><input type="checkbox" id="checkAll">全选</td><td width="349">店铺宝贝</td><td width="79">单件积分</td><td width="79">单价（元）</td><td width="99">数量</td><td width="79">小计（元）</td><td width="59">操作</td></tr><tr><td colspan="7"><hr color="#a5c3e6" size="3"></td></tr></thead><tbody><tr class="shop"><td colspan="7">店铺：<a href="javascript:void(0)">纤巧百媚时尚鞋纺</a>卖家：<a href="javascript:void(0)">纤巧百媚</a><a href="javascript:void(0)" class="relation"></a></td></tr><tr class="content"><td><input type="checkbox"></td><td><div class="good"><div class="goodPic"><img src="images/taobao_cart_01.jpg"></div><div class="goodInfo"><div><div class="goodName"><a href="javascript:void(0)">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></div><div>颜色：棕色 尺码：37</div><div>保障：<img src="images/taobao_icon_01.jpg"></div></div></div></div></td><td class="point">5</td><td class="price">138.00</td><td class="amount"><img src="images/taobao_minus.jpg"><input type="text" value="1"><img src="images/taobao_adding.jpg"></td><td class="goodPrice">138</td><td class="delete"><a href="javascript:void(0)">删除</a></td></tr><tr class="shop"><td colspan="7">店铺：<a href="javascript:void(0)">香港我的美丽日记</a>卖家：<a href="javascript:void(0)">lokemick2009</a><a href="javascript:void(0)" class="relation"></a></td></tr><tr class="content"><td><input type="checkbox"></td><td><div class="good"><div class="goodPic"><img src="images/taobao_cart_02.jpg"></div><div class="goodInfo"><div><div class="goodName"><a href="javascript:void(0)">chanel/香奈尔/香奈尔炫亮美丽唇膏3.5g</a></div><div>保障：<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></div></div></div></div></td><td class="point">12</td><td class="price">265.00</td><td class="amount"><img src="images/taobao_minus.jpg"><input type="text" value="1"><img src="images/taobao_adding.jpg"></td><td class="goodPrice">265</td><td class="delete"><a href="javascript:void(0)">删除</a></td></tr><tr class="shop"><td colspan="7">店铺：<a href="javascript:void(0)">实体经营</a>卖家：<a href="javascript:void(0)">林颜店铺</a><a href="javascript:void(0)" class="relation"></a></td></tr><tr class="content"><td><input type="checkbox"></td><td><div class="good"><div class="goodPic"><img src="images/taobao_cart_03.jpg"></div><div class="goodInfo"><div><div class="goodName"><a href="javascript:void(0)">蝶妆海皙蓝清滢粉底液10#（象牙白）</a></div><div>保障：<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></div></div></div></div></td><td class="point">3</td><td class="price">85.00</td><td class="amount"><img src="images/taobao_minus.jpg"><input type="text" value="1"><img src="images/taobao_adding.jpg"></td><td class="goodPrice">85</td><td class="delete"><a href="javascript:void(0)">删除</a></td></tr><tr class="shop"><td colspan="7">店铺：<a href="javascript:void(0)">红豆豆的小屋</a>卖家：<a href="javascript:void(0)">taobao豆豆</a><a href="javascript:void(0)" class="relation"></a></td></tr><tr class="content"><td><input type="checkbox"></td><td><div class="good"><div class="goodPic"><img src="images/taobao_cart_04.jpg"></div><div class="goodInfo"><div><div class="goodName"><a href="javascript:void(0)">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></div><div>保障：<img src="images/taobao_icon_01.jpg"></div></div></div></div></td><td class="point">12</td><td class="price">12.00</td><td class="amount"><img src="images/taobao_minus.jpg"><input type="text" value="1"><img src="images/taobao_adding.jpg"></td><td class="goodPrice">12</td><td class="delete"><a href="javascript:void(0)">删除</a></td></tr></tbody></table><div class="totalPrice">商品总价（不含运费）：<span id="totalPrice">0</span>元</div><div class="totalPoint"><img src="images/taobao_del.jpg" id="delSelected">可获积分：<span id="totalPoint">0</span>点</div><div class="buy"><img src="images/taobao_subtn.jpg"></div>
</div>
</body>
</html>
<script src="js/buybuybuy.js"></script>

js部分：

var ckAll = my$("checkAll");
//获取复选框所在tr
var tr = document.getElementsByClassName('content');
//cks用于存储tr
var cks = new Array();
//获取删除按钮所在
var del = document.getElementsByClassName('delete');
//dels用于存储删除按钮
var dels = new Array();//获取复选框和删除按钮
function getItems() {tr = document.getElementsByClassName('content');cks = [];//存储复选框for (var i = 0; i < tr.length; i++) {cks.push(tr[i].firstElementChild.firstElementChild);}del = document.getElementsByClassName('delete');dels = [];for (var i = 0; i < del.length; i++) {dels.push(del[i].firstElementChild);}
}getItems();//全选功能
ckAll.onclick = function () {for (var i = 0; i < cks.length; i++) {cks[i].checked = this.checked;}calculate();
}
for (var i = 0; i < cks.length; i++) {cks[i].onclick = function () {var flag = true;for (var i = 0; i < cks.length; i++) {if (!cks[i].checked) {flag = false;break;}}ckAll.checked = flag;calculate();}
}//计算价格、积分
function calculate() {var totalPrice = 0;var totalPoint = 0;for (var i = 0; i < tr.length; i++) {if (cks[i].checked) {tr[i].getElementsByClassName('goodPrice')[0].innerText =tr[i].getElementsByClassName('price')[0].innerText *tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value;totalPrice += parseInt(tr[i].getElementsByClassName('goodPrice')[0].innerText);totalPoint += parseInt(tr[i].getElementsByClassName('point')[0].innerText) *tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value;}}my$('totalPrice').innerText = totalPrice;my$('totalPoint').innerText = totalPoint;
}calculate();//删除商品函数
function delEle(good) {console.log('别呀客官！！！！');var parent = good.parentNode.parentNode.parentNode;var child1 = good.parentNode.parentNode;var child2 = good.parentNode.parentNode.previousElementSibling;parent.removeChild(child1);parent.removeChild(child2);
}//给单个按钮设置删除事件
for (var i = 0; i < dels.length; i++) {dels[i].onclick = function () {var r=confirm("你确定删除吗？");if (r==true){delEle(this);getItems();calculate();}};
}
//删除所选
my$('delSelected').onclick = function () {var r=confirm("你确定删除吗？");if (r==true){for (var i = 0; i < cks.length; i++) {if (cks[i].checked) {delEle(cks[i]);}}getItems();calculate();}
}//改变商品数量后重新进行计算
for (let i = 0; i < tr.length; i++) {tr[i].getElementsByClassName('amount')[0].getElementsByTagName('img')[0].onclick = function () {if (tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value != 1) {tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value -= 1;} else {alert('商品数量不能小于1');}calculate();}tr[i].getElementsByClassName('amount')[0].getElementsByTagName('img')[1].onclick = function () {tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value =parseInt(tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value) + 1;calculate();}tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].onkeyup = function () {if (this.value < 1 || isNaN(this.value)) {this.value = 1}calculate();}
}

css部分：

* {margin: 0;padding: 0;text-decoration: none;list-style: none;
}body > div {margin: 0 auto;width: 800px;
}.logo {margin: 10px 0;
}.location {margin: 10px 0;font-size: 12px;
}.course {margin: 10px 0;height: 23px;overflow: hidden;
}.course > div {float: left;text-align: center;line-height: 23px;font-weight: bold;font-size: 12px;
}.courseEdge {width: 3px;height: 23px;background: url("../images/taobao_bg.png") no-repeat;
}.leftEdge {background-position: -12px -69px;
}.leftEdge-selected {background-position: -12px -92px;
}.rightEdge {background-position: -12px -138px;
}.rightEdge-selected {background-position: -12px -161px;
}.courses-selected {width: 146px;height: 23px;background-color: #ff6600;color: white;
}.courses {width: 147px;height: 23px;background-color: #e4e4e4;
}.between {width: 15px;height: 23px;background: url("../images/taobao_bg.png") no-repeat;
}.betweenLeft {background-color: #e4e4e4;
}.betweenLeft-selected {background-color: #ff6600;
}.betweenRight {background-position: 0px 0px;
}.between-right-selected {background-position: 0px -23px;
}table td {border-right: 1px solid white;
}thead td {text-align: center;
}table * {font-size: 12px;
}a.relation {width: 69px;height: 21px;background-image: url("../images/taobao_relation.jpg");display: inline-block;position: relative;top: 3px;
}tr.shop {height: 30px;
}tr.content td {background-color: #d1ecff;height: 80px;padding: 6px;line-height: 80px;text-align: center;
}.good {overflow: hidden;
}.good > div {float: left;
}.goodPic img {vertical-align: middle;
}.goodInfo {width: 240px;height: 80px;overflow: hidden;line-height: 20px;text-align: left;padding: auto 0px;margin-left: 9px;position: relative;display: table;
}.goodInfo > div {display: table-cell;vertical-align: middle;
}.goodName {color: -webkit-link;
}.point {font-weight: bold;
}.amount input {width: 27px;
}.goodPrice {font-weight: bold;color: #ff6600;
}.amount img {cursor: pointer;
}.amount input {text-align: center;
}.totalPrice {text-align: right;font-size: 12px;padding: 10px;
}span {font-size: 15px;font-weight: bold;color: #ff6600;
}.totalPoint {text-align: right;font-size: 12px;padding: 10px 10px 10px 0;position: relative;
}.totalPoint img {cursor: pointer;position: absolute;left: 0;
}.buy {text-align: right;padding: 10px;cursor: pointer;
}

主要时间花在了js部分，在点击各种按钮后，要进行不同的操作，并且还要追加相同的，对商品所在的部分进行重新统计，然后再次计算价格，以及积分，所以计算部分单独写了个函数。