<header class = "logo">
<img src="images/taobao_logo.gif" class="logo_1">
<header>
<ul id="Logo">
<li>您的位置：</li>
<li>首页></li>
<li>我的淘宝></li>
<li>我的购物车</li>
</ul>
<div id="banner_1">
<ul id="banner">
<li>1.查看购物车<img src="images/20180118162835.png"></li>
<li>2.确认订单信息<img src="images/20180118162835.png"></li>
<li>3.付款到支付<img src="images/20180118162835.png"></li>
<li>4.确认到收获<img src="images/20180118162835.png"></li>
<li>5.评价</li>
</ul>
</div>
<div id="banner_2">
<div id="xuan">
<ul id="jiaa">
<input type="radio" id="kw" onclick="fun(true)" >
<label for="kw">全选</label>
<li>店铺宝贝</li>
<li>获积分</li>
<li>单价(元)</li>
<li>数量</li>
<li>小计(元)</li>
<li>操作</li>
</ul>
</div>
</div>
<div id="shuju">
<div id ="shuiji_1">
<span>店铺：纤巧百媚时尚鞋坊卖家：纤巧百媚</span><img src="images/taobao_relation.jpg">
</div>
<table id="ge">
<tr id="tr1">
<td><input type="checkbox" class="Qx"/></td>
<td class="kuang">
<img src="images/taobao_cart_01.jpg" class="yifu">
<p class="zi">日韩流行风时尚美眉最爱独特米字拼图金属坡</p><br/>
<p class="zi">跟公主靴子黑色</p><br/>
<p class="zi">颜色：棕色 尺码：37</p><br/>
<p class="zi">保障：<img src="images/taobao_icon_01.jpg"></p><br/>
</td>
<td class="num_1" class="jifenga">5</td>
<td id="num_2" class="manne">138.00</td>
<td>
<button id="jia" class="jia_Xao">+</button><input type="number" value="1" id="zhong"><button id="jian" class="jian_Xao">-</button>
</td>
<td id="num_3">138</td>
<td><button class="shanchu">删除</button></td>
</tr>
</table>
</div>
<div id="shuju">
<div id ="shuiji_1">
<span>店铺：纤巧百媚时尚鞋坊卖家：纤巧百媚</span><img src="images/taobao_relation.jpg">
</div>
<table id="ge">
<tr id="tr1">
<td><input type="checkbox" class="Qx"/></td>
<td class="kuang">
<img src="images/taobao_cart_01.jpg" class="yifu">
<p class="zi">日韩流行风时尚美眉最爱独特米字拼图金属坡</p><br/>
<p class="zi">跟公主靴子黑色</p><br/>
<p class="zi">颜色：棕色 尺码：37</p><br/>
<p class="zi">保障：<img src="images/taobao_icon_01.jpg"></p><br/>
</td>
<td id="num_1" class="jifenga">5</td>
<td class="manne">18.00</td>
<td>
<button id="jia" class="jia_Xao">+</button><input type="number" value="1" id="zhong"><button id="jiana" class="jian_Xao">-</button>
</td>
<td id="num_3">522</td>
<td><button class="shanchu">删除</button></td>
</tr>
</table>
</div>
<div id="shuju">
<div id ="shuiji_1">
<span>店铺：纤巧百媚时尚鞋坊卖家：纤巧百媚</span><img src="images/taobao_relation.jpg">
</div>
<table id="ge">
<tr id="tr1">
<td><input type="checkbox" class="Qx"/></td>
<td class="kuang">
<img src="images/taobao_cart_01.jpg" class="yifu">
<p class="zi">日韩流行风时尚美眉最爱独特米字拼图金属坡</p><br/>
<p class="zi">跟公主靴子黑色</p><br/>
<p class="zi">颜色：棕色 尺码：37</p><br/>
<p class="zi">保障：<img src="images/taobao_icon_01.jpg"></p><br/>
</td>
<td class="jifenga">5</td>
<td class="manne">138.00</td>
<td>
<button id="jia" class="jia_Xao">+</button><input type="number" value="1" id="zhong"><button id="jiana" class="jian_Xao">-</button>
</td>
<td>522</td>
<td><button class="shanchu">删除</button></td>
</tr>
</table>
</div>
<div id="shuju">
<div id ="shuiji_1">
<span>店铺：纤巧百媚时尚鞋坊卖家：纤巧百媚</span><img src="images/taobao_relation.jpg">
</div>
<table id="ge">
<tr id="tr1">
<td><input type="checkbox" class="Qx"/></td>
<td class="kuang">
<img src="images/taobao_cart_01.jpg" class="yifu">
<p class="zi">日韩流行风时尚美眉最爱独特米字拼图金属坡</p><br/>
<p class="zi">跟公主靴子黑色</p><br/>
<p class="zi">颜色：棕色 尺码：37</p><br/>
<p class="zi">保障：<img src="images/taobao_icon_01.jpg"></p><br/>
</td>
<td class="jifenga">5</td>
<td class="manne">38.00</td>
<td>
<button id="jia" class="jia_Xao">+</button><input type="number" value="1" id="zhong"><button id="jiana" class="jian_Xao">-</button>
</td>
<td>522</td>
<td><button class="shanchu" >删除</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
</script>
<div class="tont_1">
<table id="font">
<tr>
<td></td>
<td id="xia">商品总价(不含运费)：<span class="zongqian">0</span>元</td>
</tr>
<tr>
<td><input type="button" value="删除所选" class="yoy" id="quanshan"/></td>
<td id="xia">可获积分<span class="feng">20</span>点</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="立即购买" id="xia1"/>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="index.js"></script>
<style>
*{padding: 0;margin: 0}
body{width: 1200px;background: #f0f0f0;margin: 0 auto;}
.logo{width: 1000px;height: 60px;background: #fff;;margin: 20px auto;}
.logo_1{margin:10px 30px; }
#Logo{width: 1000px;height: 30px;background: #fff;margin:0px auto;}
#Logo li{list-style: none;float: left;font-size: 14px;}
#Logo li:nth-child(1){margin-left:30px }
#Logo li:hover{color:blue;cursor:pointer;}
#banner_1{width: 1000px;margin: 0 auto;background: #fff}
#banner{width: 940px;margin: 0 auto;background: red;height:24px;border-radius: 5px;list-style: none;overflow: hidden;}
#banner li{float: left;font-size: 13px;width:188px;background: #e4e4e4;line-height: 26px;text-align: center;font-weight :bold}
#banner li img{float: right;}
#banner li:hover{background: #FF6600;cursor:pointer;}
#banner_2{width: 1000px;margin: 0 auto;background: #fff;height: 45px;overflow: hidden;}
#xuan{width: 960px;margin:16px 30px;height: 20px;border-bottom: 4px solid #ADC8F6;}
#xuan span{font-size: 13px;}
#jiaa li{list-style: none;float: left;font-size: 14px;}
#jiaa li:nth-child(3){margin-left:215px}
#jiaa li:nth-child(4){margin-left: 174px}
#jiaa li:nth-child(5){margin-left: 60px}
#jiaa li:nth-child(6){margin-left: 67px}
#jiaa li:nth-child(7){margin-left: 68px}
#jiaa li:nth-child(8){margin-left: 50px}
#jiaa input{float: left;width: 16px;height: 16px;}
#jiaa label{float: left;display:block;font-size: 14px;}
#shuju{width:1000px;margin: 0 auto;background: #fff;height: 140px;}
#shuiji_1{width:960px;margin-left:30px; background: #fff;height: 40px}
#shuiji_1 span{display: block;font-size: 14px;float: left;padding-top: 16px}
#shuiji_1 img{padding-top: 18px;float: left;}
#ge{width:960px;margin-left:30px; background:#EFFBFE;height: 100px;height: 100px}
#ge td input:nth-child(1){margin-left: 40px;}
.yifu{float: left;}
.zi{float: left;font-size: 14px;}
#tr1 td:nth-child(1){width: 100px;border-right: 1px solid #fff}
#tr1 td:nth-child(2){width: 360px;border-right: 1px solid #fff}
#tr1 td:nth-child(3){width: 99px;text-align: center;border-right: 1px solid #fff}
#tr1 td:nth-child(4){width: 99px;text-align: center;border-right: 1px solid #fff;font-size: 14px;}
#tr1 td:nth-child(5){width: 99px;text-align: center;border-right: 1px solid #fff;font-size: 14px;}
#tr1 td:nth-child(5) input{width: 40px;border-right: 1px solid #fff;margin-left: 0px;border:1px solid #fefefe; }
#tr1 td:nth-child(6){width: 99px;text-align: center;border-right: 1px solid #fff;color: #DF6D28;font-weight: bold;}
#tr1 td:nth-child(7){width: 80px;text-align: center;color:#81AFCA;font-size: 14px;}
#xia{text-align: right;font-size: 14px;}
#xia1{float: right;background: #FE6500;color:#fff;border: 1px solid #FE6500;border-radius: 3px;font-size: 12px;width: 80px;height: 30px;}
#xia span{font-size: 20px;font-weight: bold;color:#DA613C;}
#font{background: #fff;width: 980px;margin: 0 auto}
.tont_1{width: 1000px;background: #fff;}
.yoy{margin-left: 20px;width: 100px;height: 30px;border-radius: 3px;border:1px solid #fff }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
</style>
//加
var jiaa=document.getElementsByClassName("jia_Xao");
for(var x of jiaa){
x.addEventListener("click",function(){
var jiajia=this.nextSibling.value //nextSibling 下一级对象之下需要放在同一级之下
this.nextSibling.value=parseInt(jiajia)+1;
//加积分
var tt=this.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.innerhtml
this.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML=parseInt(tt)+5
var jifenga=document.getElementsByClassName("jifenga")
var feng=document.getElementsByClassName("feng")
sum_a=0
for(var i =0;i<jifenga.length;i++){
sum_a+=parseInt(jifenga[i].innerHTML);
}
feng[0].innerHTML=sum_a+5;
//加钱
var zongqian=document.getElementsByClassName("zongqian")
var mon_a=document.getElementsByClassName("manne");
var sum=0
for(var i=0;i<mon_a.length;i++){
sum+=parseInt(mon_a[i].innerHTML);
}
zongqian[0].innerHTML=sum;
});
}
// 减
var jiann=document.getElementsByClassName("jian_Xao");
for(var y of jiann){
y.addEventListener("click",function(){
var jianjian=this.previousSibling.value
if(jianjian==0){
this.previousSibling.value=0;
}else{
this.previousSibling.value=parseInt(jianjian)-1;
}
//减积分
var jifenga=document.getElementsByClassName("jifenga")
var feng=document.getElementsByClassName("feng")
sum_b=0
for(var i =0;i<jifenga.length;i++){
sum_b+=parseInt(jifenga[i].innerHTML);
}
feng[0].innerHTML=sum_b;
var tt=this.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML
if(tt==0){
this.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML="0"
}else{
this.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML=parseInt(tt)-5
}
})
}
//单选删除
var dels = document.getElementsByClassName("shanchu");
for (var x of dels) {
x.onclick = deletebut;
}
function deletebut(){
this.parentNode.parentNode.parentNode.parentNode.parentNode.remove();
}
var btn=document.getElementsByClassName("Qx");
function fun(a){
for(var x of btn){
x.checked = a ;
}
}
//所选删除
var shanchu=document.getElementById(‘quanshan‘);
shanchu.onclick= function(){
var btn=document.getElementsByClassName("Qx");
for(var i=btn.length-1;i>=0;i--){
if(btn[i].checked == true){
console.log(btn[i].parentNode.parentNode.parentNode.parentNode.parentNode.remove())
}
}
}