【DOM练习】淘宝购物车

HTML：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <link rel="stylesheet" href="css/css.css" />
  7     </head>
  8     <body>
  9         <div id="container">
 10             <img src="img/taobao_logo.gif"/>
 11             <ul id="weizhi">
 12                 <li>您的位置:</li>
 13                 <li>首页</li>
 14                 <li>></li>
 15                 <li>我的淘宝</li>
 16                 <li>></li>
 17                 <li>我的购物车</li>
 18             </ul>
 19             
 20             <ul id="liuCheng">
 21                 <li>1.查看购物车<div class="fang he"></div></li>
 22                 <li>2.确认订单信息<div class="fang"></div></li>
 23                 <li>3.收款到支付宝<div class="fang"></div></li>
 24                 <li>4.确认收货<div class="fang"></div></li>
 25                 <li>5.评价</li>
 26             </ul>
 27             
 28             
 29             <table border="0" cellspacing="1" cellpadding="0" id="table"> 
 30                 <tr>
 31                         <td><input type="checkbox" id="all"/><label for="all">全选</label></td>
 32                         <td>店铺宝贝</td>
 33                         <td>获积分</td>
 34                         <td>单价（元）</td>
 35                         <td>数量</td>
 36                         <td>小计</td>
 37                         <td>操作</td>
 38                 </tr>
 39                 
 40                 <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
 41                 <tr class="hang">
 42                         <td><input type="checkbox" class="box"/></td>
 43                         <td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色&nbsp;尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
 44                         <td><b>5</b></td>
 45                         <td class="danJia">138.00</td>
 46                         <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>
 47                         <td class="xiaoJi">552</td>
 48                         <td><a>删除</a></td>
 49                 </tr>
 50                 
 51                 
 52                 <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
 53                 <tr class="hang">
 54                         <td><input type="checkbox" class="box"/></td>
 55                         <td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色&nbsp;尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
 56                         <td><b>5</b></td>
 57                         <td class="danJia">938.00</td>
 58                         <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>
 59                         <td class="xiaoJi">552</td>
 60                         <td><a>删除</a></td>
 61                 </tr>
 62                 
 63                 
 64                 <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
 65                 <tr class="hang">
 66                         <td><input type="checkbox" class="box"/></td>
 67                         <td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色&nbsp;尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
 68                         <td><b>5</b></td>
 69                         <td class="danJia">638.00</td>
 70                         <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>
 71                         <td class="xiaoJi">552</td>
 72                         <td><a>删除</a></td>
 73                 </tr>
 74                 
 75                 
 76                 <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
 77                 <tr class="hang">
 78                         <td><input type="checkbox" class="box"/></td>
 79                         <td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色&nbsp;尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
 80                         <td><b>5</b></td>
 81                         <td class="danJia">538.00</td>
 82                         <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>
 83                         <td class="xiaoJi">552</td>
 84                         <td><a>删除</a></td>
 85                 </tr>
 86                 
 87             </table>
 88             
 89             
 90             <span id="zong">商品总价（不含运费）：<font id="qian">1349</font>元</span>
 91             <button id="shanChu">删除所选</button><br />
 92             <span id="fen">可获积分：<font id="dian">65</font>点</span><br />
 93             <img src="img/taobao_subtn.jpg" alt="" id="gouMai" onclick="javascript:alert('瞎点啥！你有钱似地')"/>
 94         </div>
 95         
 96         
 97         
 98 
 99 
100         
101         <script type="text/javascript" src="js/js.js" ></script>
102     </body>
103 </html>

CSS：

 1             *{margin:0 auto;padding:0;list-style: none;}
 2             body{width:1200px;background:#fff}
 3             #container{background:#fff;height:200px;padding-top:10px}
 4             #weizhi{display:block}
 5             #weizhi li{float:left;font-size:14px;margin-top:20px;}
 6             #weizhi li:nth-child(2){color: blue;}
 7             #weizhi li:nth-child(4){color: blue;}
 8             
 9             #liuCheng{display:block;margin-top:40px;background: #FF6600;display: inline-block;border-radius:5px}
10             #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}
11             #liuCheng li+li{background: #bbb;color: #000;font-weight:600}
12             .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;}
13             .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;}
14             
15             #liuCheng li:nth-last-child{border-radius:5px}
16             
17             #table {text-align:center;margin-top:6px;}
18             #table tr{border-bottom:4px solid #B2CAF5;height: 30px;width: 100%;;display:inline-block;font-size:14px}
19             #table tr td:nth-child(1){width: 50px;}
20             #table tr td:nth-child(2){width: 520px;}
21             #table tr td:nth-child(3){width: 120px;}
22             #table tr td:nth-child(4){width: 120px;}
23             #table tr td:nth-child(5){width: 170px;}
24             #table tr td:nth-child(6){width: 120px;}
25             #table tr td:nth-child(7){width: 100px;}
26             
27             
28             .top_hang{width: 100%;height: 20px; border:0px !important;text-align:left}
29             .top_hang>td:nth-child(1){width:500px !important;height: 20px;padding-top:2px;box-sizing:border-box}
30             .top_hang>td>font{color: #3F6791;margin-left: 4px;margin-right: 4px;}
31             .top_hang td img{display:inline-block;margin-bottom: -6px;}
32             
33             .hang{width: 100%;height: 120px !important; border:0px !important;}
34             .hang td{border:2px solid #E2F2FF;height:110px;box-sizing:border-box;background:#E2F2FF;padding:8px;position: relative;}
35             .hang td img{float:left;margin-right:20px}
36             .hang td p{float:left;width:360px;text-align: left;color:#357198;font-size:13px;margin-top:-5px;line-height:21px}
37             .hang td span{float:left;width:360px;text-align: left;color:#000;font-size:13px;margin-top:2px}
38             .hang td span img{float: none;}
39             .number{width: 30px;text-align: center;}
40             .Button_jia{float: none !important;position: absolute;right:30px;top:50px;}
41             .Button_jian{float: none !important;position: absolute;left:48px;top:50px;}
42             .Button_jia,.Button_jian,a:hover{cursor:pointer}
43             .xiaoJi{font-size:17px;font-weight:700;color:#EB5A14}
44             .hang td a{color:#357198;text-decoration: none;}
45             
46             
47             #zong{float:right;font-size:15px}
48             #qian{font-size:24px;font-weight:700;color:#EB5A14}
49             
50             
51             #shanChu{margin-top:40px}
52             
53             #fen{float: right;display: inline;height:20px}
54             
55             #gouMai{float: right;margin-top: 20px;}
56             
57             input::-webkit-outer-spin-button,
58             input::-webkit-inner-spin-button {
59                 -webkit-appearance: none;
60             }
61             input[type="number"]{
62                 -moz-appearance: textfield;
63             }

JS：

  1 xiaoji();
  2             //减号选择0
  3             var jianhao_arr=document.querySelectorAll(".Button_jian")
  4             for(var x of jianhao_arr){
  5                 x.addEventListener("click",function(){
  6                     var zhi=this.nextSibling.value;
  7                     
  8                     if(zhi-1==0){
  9                         alert("没点儿b数？");
 10                     }else{
 11                         this.nextSibling.value=zhi-1
 12                     }
 13                     xiaoji();
 14                 })
 15             }
 16             
 17             //加号
 18             var jiahao_arr=document.querySelectorAll(".Button_jia")
 19             for(var x of jiahao_arr){
 20                 x.addEventListener("click",function(){
 21                     var zhi=this.previousSibling.value;
 22                     this.previousSibling.value=1+parseInt(zhi);
 23                     xiaoji();
 24                 })
 25             }
 26             
 27             
 28             
 29             //全选
 30             var all=document.querySelector("#all");
 31             var meige=document.querySelectorAll(".box")
 32             
 33             all.onclick=function xuanZe(){
 34                 for(var i of meige){
 35                     i.checked=all.checked
 36                 }
 37             }
 38             
 39             
 40             //删除
 41             var a=document.querySelectorAll("a")
 42             for(var a of a){
 43                 a.addEventListener("click",function(){
 44                     this.parentNode.parentNode.previousSibling.previousSibling.remove()
 45                     this.parentNode.parentNode.remove();
 46                     xiaoji();
 47                 })
 48             }
 49             
 50             
 51             
 52             //小计
 53             function xiaoji(){
 54                 var xiaoji=document.querySelectorAll(".xiaoJi")    //小ji标签!
 55                 var danjia=document.querySelectorAll(".danJia")    //单价标签!
 56                 for(var x=0;x<danjia.length;x++){
 57                     var zhi=danjia[x].nextSibling.nextSibling.children[1].value;
 58                     xiaoji[x].innerText=parseInt(danjia[x].innerHTML)*parseInt(zhi)
 59                 }
 60                 jiFen();
 61                 zong(xiaoji);
 62             }
 63             
 64             
 65             
 66             
 67             
 68                 //总计
 69             function zong(xiaoji2){//小ji标签!
 70                 var arr=[];
 71                 if(xiaoji2.length==0){document.querySelector("#qian").innerHTML=0}
 72                 for(x of xiaoji2){
 73                     arr.push(x.innerHTML);
 74                     var he=arr.reduce(function(x,y){return  parseInt(x)+parseInt(y);})
 75                     document.querySelector("#qian").innerHTML=he;        
 76                 }
 77             }
 78             
 79             
 80             
 81             //删除所有按钮
 82             var btn=document.querySelector("#shanChu");
 83             btn.onclick=function(){        
 84                 var box=document.querySelectorAll(".box");
 85                 for(x of box){
 86                     if(x.checked==true){
 87                         x.parentNode.parentNode.previousSibling.previousSibling.remove()
 88                         x.parentNode.parentNode.remove();
 89                         xiaoji();    
 90                     }
 91                 }
 92             }
 93             
 94             
 95             //每个积分
 96             function jiFen(){    
 97                 var jifen=5;
 98                 var b=document.querySelectorAll("b");
 99                 for(x of b){
100                     var num=x.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.children[1].value;
101                     console.log(num)
102                     var ge=jifen*num;
103                     x.innerText=ge;
104                 }
105                 zongJiFen(b);
106             }
107             
108             //总积分
109             function zongJiFen(b){    
110                 var arr=[];
111                 if(b.length==0){document.querySelector("#dian").innerHTML=0}
112                 for(x of b){
113                     arr.push(x.innerHTML);
114                     var he=arr.reduce(function(x,y){return  parseInt(x)+parseInt(y);})
115                     document.querySelector("#dian").innerHTML=he;        
116                 }
117             }

posted @ 2018-01-21 15:42 邢坤阅读(286) 评论(0) 编辑收藏举报

刷新页面返回顶部