嘛,先上代码:
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部分,在点击各种按钮后,要进行不同的操作,并且还要追加相同的,对商品所在的部分进行重新统计,然后再次计算价格,以及积分,所以计算部分单独写了个函数。