HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/css.css" />
</head>
<body>
<div id="container">
<img src="img/taobao_logo.gif"/>
<ul id="weizhi">
<li>您的位置:</li>
<li>首页</li>
<li>></li>
<li>我的淘宝</li>
<li>></li>
<li>我的购物车</li>
</ul> <ul id="liuCheng">
<li>1.查看购物车<div class="fang he"></div></li>
<li>2.确认订单信息<div class="fang"></div></li>
<li>3.收款到支付宝<div class="fang"></div></li>
<li>4.确认收货<div class="fang"></div></li>
<li>5.评价</li>
</ul> <table border="0" cellspacing="1" cellpadding="0" id="table">
<tr>
<td><input type="checkbox" id="all"/><label for="all">全选</label></td>
<td>店铺宝贝</td>
<td>获积分</td>
<td>单价（元）</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr> <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
<tr class="hang">
<td><input type="checkbox" class="box"/></td>
<td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
<td><b>5</b></td>
<td class="danJia">138.00</td>
<td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="1" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td>
<td class="xiaoJi">552</td>
<td><a>删除</a></td>
</tr> <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
<tr class="hang">
<td><input type="checkbox" class="box"/></td>
<td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
<td><b>5</b></td>
<td class="danJia">938.00</td>
<td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="2" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td>
<td class="xiaoJi">552</td>
<td><a>删除</a></td>
</tr> <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
<tr class="hang">
<td><input type="checkbox" class="box"/></td>
<td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
<td><b>5</b></td>
<td class="danJia">638.00</td>
<td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="2" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td>
<td class="xiaoJi">552</td>
<td><a>删除</a></td>
</tr> <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
<tr class="hang">
<td><input type="checkbox" class="box"/></td>
<td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
<td><b>5</b></td>
<td class="danJia">538.00</td>
<td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="3" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td>
<td class="xiaoJi">552</td>
<td><a>删除</a></td>
</tr> </table> <span id="zong">商品总价（不含运费）：<font id="qian">1349</font>元</span>
<button id="shanChu">删除所选</button><br />
<span id="fen">可获积分：<font id="dian">65</font>点</span><br />
<img src="img/taobao_subtn.jpg" alt="" id="gouMai" onclick="javascript:alert('瞎点啥！你有钱似地')"/>
</div> <script type="text/javascript" src="js/js.js" ></script>
</body>
</html>
CSS：
*{margin:0 auto;padding:0;list-style: none;}
body{width:1200px;background:#fff}
#container{background:#fff;height:200px;padding-top:10px}
#weizhi{display:block}
#weizhi li{float:left;font-size:14px;margin-top:20px;}
#weizhi li:nth-child(2){color: blue;}
#weizhi li:nth-child(4){color: blue;}
#liuCheng{display:block;margin-top:40px;background: #FF6600;display: inline-block;border-radius:5px}
#liuCheng li{ float: left; width: 240px;height: 40px;text-align:center;box-sizing:border-box;padding-top:8px;font-size: 18px;background: #FF6600;color: #fff;font-weight:600}
#liuCheng li+li{background: #bbb;color: #000;font-weight:600}
.fang{display: inline-block;width: 27px;height:27px;float:right;transform:rotate(45deg);margin-right:-15px;margin-top: -3px;border-top:4px solid #fff;border-right:4px solid #fff;background:#bbb;}
.he{display: inline-block;width: 27px;height:27px;float:right;transform:rotate(45deg);margin-right:-15px;margin-top: -3px;border-top:4px solid #fff;border-right:4px solid #fff;background:#FF6600;}
#liuCheng li:nth-last-child{border-radius:5px}
#table {text-align:center;margin-top:6px;}
#table tr{border-bottom:4px solid #B2CAF5;height: 30px;width: 100%;;display:inline-block;font-size:14px}
#table tr td:nth-child(1){width: 50px;}
#table tr td:nth-child(2){width: 520px;}
#table tr td:nth-child(3){width: 120px;}
#table tr td:nth-child(4){width: 120px;}
#table tr td:nth-child(5){width: 170px;}
#table tr td:nth-child(6){width: 120px;}
#table tr td:nth-child(7){width: 100px;}
.top_hang{width: 100%;height: 20px; border:0px !important;text-align:left}
.top_hang>td:nth-child(1){width:500px !important;height: 20px;padding-top:2px;box-sizing:border-box}
.top_hang>td>font{color: #3F6791;margin-left: 4px;margin-right: 4px;}
.top_hang td img{display:inline-block;margin-bottom: -6px;}
.hang{width: 100%;height: 120px !important; border:0px !important;}
.hang td{border:2px solid #E2F2FF;height:110px;box-sizing:border-box;background:#E2F2FF;padding:8px;position: relative;}
.hang td img{float:left;margin-right:20px}
.hang td p{float:left;width:360px;text-align: left;color:#357198;font-size:13px;margin-top:-5px;line-height:21px}
.hang td span{float:left;width:360px;text-align: left;color:#000;font-size:13px;margin-top:2px}
.hang td span img{float: none;}
.number{width: 30px;text-align: center;}
.Button_jia{float: none !important;position: absolute;right:30px;top:50px;}
.Button_jian{float: none !important;position: absolute;left:48px;top:50px;}
.Button_jia,.Button_jian,a:hover{cursor:pointer}
.xiaoJi{font-size:17px;font-weight:700;color:#EB5A14}
.hang td a{color:#357198;text-decoration: none;}
#zong{float:right;font-size:15px}
#qian{font-size:24px;font-weight:700;color:#EB5A14}
#shanChu{margin-top:40px}
#fen{float: right;display: inline;height:20px}
#gouMai{float: right;margin-top: 20px;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
JS：
xiaoji();
//减号选择0
var jianhao_arr=document.querySelectorAll(".Button_jian")
for(var x of jianhao_arr){
x.addEventListener("click",function(){
var zhi=this.nextSibling.value; if(zhi-1==0){
alert("没点儿b数？");
}else{
this.nextSibling.value=zhi-1
}
xiaoji();
})
} //加号
var jiahao_arr=document.querySelectorAll(".Button_jia")
for(var x of jiahao_arr){
x.addEventListener("click",function(){
var zhi=this.previousSibling.value;
this.previousSibling.value=1+parseInt(zhi);
xiaoji();
})
} //全选
var all=document.querySelector("#all");
var meige=document.querySelectorAll(".box") all.onclick=function xuanZe(){
for(var i of meige){
i.checked=all.checked
}
} //删除
var a=document.querySelectorAll("a")
for(var a of a){
a.addEventListener("click",function(){
this.parentNode.parentNode.previousSibling.previousSibling.remove()
this.parentNode.parentNode.remove();
xiaoji();
})
} //小计
function xiaoji(){
var xiaoji=document.querySelectorAll(".xiaoJi") //小ji标签!
var danjia=document.querySelectorAll(".danJia") //单价标签!
for(var x=0;x<danjia.length;x++){
var zhi=danjia[x].nextSibling.nextSibling.children[1].value;
xiaoji[x].innerText=parseInt(danjia[x].innerHTML)*parseInt(zhi)
}
jiFen();
zong(xiaoji);
} //总计
function zong(xiaoji2){//小ji标签!
var arr=[];
if(xiaoji2.length==0){document.querySelector("#qian").innerHTML=0}
for(x of xiaoji2){
arr.push(x.innerHTML);
var he=arr.reduce(function(x,y){return parseInt(x)+parseInt(y);})
document.querySelector("#qian").innerHTML=he;
}
} //删除所有按钮
var btn=document.querySelector("#shanChu");
btn.onclick=function(){
var box=document.querySelectorAll(".box");
for(x of box){
if(x.checked==true){
x.parentNode.parentNode.previousSibling.previousSibling.remove()
x.parentNode.parentNode.remove();
xiaoji();
}
}
} //每个积分
function jiFen(){
var jifen=5;
var b=document.querySelectorAll("b");
for(x of b){
var num=x.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.children[1].value;
console.log(num)
var ge=jifen*num;
x.innerText=ge;
}
zongJiFen(b);
} //总积分
function zongJiFen(b){
var arr=[];
if(b.length==0){document.querySelector("#dian").innerHTML=0}
for(x of b){
arr.push(x.innerHTML);
var he=arr.reduce(function(x,y){return parseInt(x)+parseInt(y);})
document.querySelector("#dian").innerHTML=he;
}
}