淘宝购物车效果淘宝购物车效果

65 阅读 0 评论 43 点赞

我是靠谱客的博主拼搏牛排，最近开发中收集的这篇文章主要介绍淘宝购物车效果淘宝购物车效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

淘宝购物车效果

　　今天给大家带来的是淘宝购物车效果，写的不怎么好，请大家多多指教。

　　效果：

　　　　1.点击全选前的选择框，选择所有的选择框。

　　　　2.点击商品的加号或者减号可以改变商品的数量值，并且改变商品的小计和他的积分，同时在最下方的总积分和总金额会改变

　　　　3.在商品的数量值可以直接更改他的值，并且商品的小计和他的积分可以改变，同时在最下方的总积分和总金额会改变

　　　　4.点击商品最后的删除按钮可以删除本商品的值，并且更改最下方的总积分和总金额

　　　　5.点击最下方的删除所选按钮可以使你选择的商品进行删除。若是全选则都删除，并且全选按钮的对勾取消

　　HTML代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>淘宝购物车效果</title>
  6     <link rel="stylesheet" type="text/css" href="css/index.css">
  7 </head>
  8 <body>
  9     <div class="box c">
 10         <div class="logo"></div>
 11         <ul>
 12             <li>您的位置：</li>
 13             <li><a href="#">首页 </a><span>> </span> </li>
 14             <li><a href="#">我的淘宝 </a><span>></span> </li>
 15             <li>我的购物车</li>
 16         </ul>
 17         <div class="shopcat">
 18             <div class="shopcat1">1.查看购物车</div>
 19             <div class="shopcat2"></div>
 20             <div class="shopcat1">2.确认订单信息</div>
 21             <div class="shopcat2"></div>
 22             <div class="shopcat1">3.付款到支付宝</div>
 23             <div class="shopcat2"></div>
 24             <div class="shopcat1">4.确认收货</div>
 25             <div class="shopcat2"></div>
 26             <div class="shopcat1">5.评价</div>
 27         </div>
 28         <table>
 29             <tr>
 30                 <td>
 31                     <input type="checkbox" id="ck">全选
 32                 </td>
 33                 <td>店铺宝贝</td>
 34                 <td>获积分</td>
 35                 <td>单价(元)</td>
 36                 <td>数量</td>
 37                 <td>小计(元)</td>
 38                 <td>操作</td>
 39             </tr>
 40             <tr class="hrs">
 41                 <td colspan="7">
 42                     <div class="cutoff"></div>
 43                 </td>
 44             </tr>
 45             <tr class="shop">
 46                 <td colspan="7">
 47                     店铺 : <span><a href="#">纤巧百媚时尚鞋坊 </a></span> 卖家: <span> <a href="#">纤巧百媚</a></span>
 48                     <span class="vendor"></span>
 49                 </td>
 50             </tr>
 51             <tr>
 52                 <td><input type="checkbox" name="ck"></td>
 53                 <td class="goods">
 54                     <img src="img/taobao_cart_01.jpg" width="100" height="100">
 55                     <div class="img_r">
 56                         <p class="p1"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></p>
 57                         <p class="p1">颜色：棕色 尺码：37 </p>
 58                         <p class="p1">
 59                             保障 :
 60                             <span class="bz"></span>
 61                         </p>
 62                     </div>
 63                 </td>
 64                 <td class="jf" name='5'>5</td>
 65                 <td>138.00</td>
 66                 <td>
 67                     <span class="minus" onclick="add(this)"></span>
 68                     <input type="number" value="1" class="nub" name="nub" id="v1">
 69                     <span class="add" onclick="add(this)"></span>
 70                 </td>
 71                 <td id="s1" class="xj">138</td>
 72                 <td><a href="#" class="del">删除</a></td>
 73             </tr>
 74             <tr class="shop">
 75                 <td colspan="7">
 76                     店铺 : <span><a href="#">香港我的美丽日记 </a></span> 卖家: <span> <a href="#">lokemick2009</a></span>
 77                     <span class="vendor"></span>
 78                 </td>
 79             </tr>
 80             <tr>
 81                 <td><input type="checkbox" name="ck"></td>
 82                 <td class="goods">
 83                     <img src="img/taobao_cart_02.jpg" alt="" width="100" height="100">
 84                     <div class="img_r">
 85                         <p><a href="#">chanl/香奈儿/香奈儿炫亮魅力唇膏3.5g</a></p>
 86                         <p>
 87                             保障 :
 88                             <span class="bz"></span>
 89                             <span class="rose"></span>
 90                         </p>
 91                     </div>
 92                 </td>
 93                 <td class="jf" name='12'>12</td>
 94                 <td>265.00</td>
 95                 <td>
 96                     <span class="minus" onclick="add(this)"></span>
 97                     <input type="number" value="1" class="nub" name="nub" id="v2">
 98                     <span class="add" onclick="add(this)"></span>
 99                 </td>
100                 <td id="s2" class="xj">265</td>
101                 <td><a href="#" class="del">删除</a></td>
102             </tr>
103             <tr class="shop">
104                 <td colspan="7">
105                     店铺 : <span><a href="#">实体店经营 </a></span> 卖家: <span> <a href="#">林颜店铺</a></span>
106                     <span class="vendor"></span>
107                 </td>
108             </tr>
109             <tr>
110                 <td><input type="checkbox" name="ck"></td>
111                 <td class="goods">
112                     <img src="img/taobao_cart_03.jpg" alt="" width="100" height="100">
113                     <div class="img_r">
114                         <p><a href="#">蝶装海？蓝清滢粉底夜10#( 象白牙 )</a></p>
115                         <p>
116                             保障 :
117                             <span class="bz"></span>
118                             <span class="rose"></span>
119                         </p>
120                     </div>
121                 </td>
122                 <td class="jf" name='3'>3</td>
123                 <td>85.00</td>
124                 <td>
125                     <span class="minus" onclick="add(this)"></span>
126                     <input type="number" value="1" class="nub" name="nub" id="v3">
127                     <span class="add" onclick="add(this)"></span>
128                 </td>
129                 <td id="s3" class="xj">85</td>
130                 <td><a href="#" class="del">删除</a></td>
131             </tr>
132             <tr class="shop">
133                 <td colspan="7">
134                     店铺 : <span><a href="#">红豆豆的小屋 </a></span> 卖家: <span> <a href="#">taobao豆豆</a></span>
135                     <span class="vendor"></span>
136                 </td>
137             </tr>
138             <tr>
139                 <td><input type="checkbox" name="ck"></td>
140                 <td class="goods">
141                     <img src="img/taobao_cart_04.jpg" alt="" width="100" height="100">
142                     <div class="img_r">
143                         <p><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></p>
144                         <p>
145                             保障 :
146                             <span class="bz"></span>
147                         </p>
148                     </div>
149                 </td>
150                 <td class="jf" name="12">12</td>
151                 <td>12.00</td>
152                 <td>
153                     <span class="minus" onclick="add(this)"></span>
154                     <input type="number" value="1" name="nub" class="nub" id="v4">
155                     <span class="add" onclick="add(this)"></span>
156                 </td>
157                 <td id="s4" class="xj" value='12'>12</td>
158                 <td><a href="#" class="del">删除</a></td>
159             </tr>
160             <tr class="last">
161                 <td colspan="4">
162                     <img src="img/taobao_del.jpg" id="alldel" >
163                 </td>
164                 <td colspan="3" rowspan="" headers="">
165                     <p>商品总价(不含运费):<span id="zj">0</span>元</p>
166                     <p>可获积分<span id="jf2">0</span>点</p>
167                     <p class="imgP">
168                         <img src="img/taobao_subtn.jpg" alt="">
169                     </p>
170                 </td>
171             </tr>
172         </table>
173     </div>
174     <script src="js/index.js"></script>
175     <script>
176         setInterval('com()',500);//定时器，每0.5s 执行下这个函数
177     </script>
178 </body>
179 </html>

　　css样式：

 1 *{margin: 0;padding: 0}
 2 html,body{width: 100%}
 3 a{text-decoration: none;}
 4 /* input的类型为number时去掉小箭头 */
 5 input::-webkit-outer-spin-button,
 6 input::-webkit-inner-spin-button {
 7     -webkit-appearance: none;
 8 }
 9 input[type="number"]{
10     -moz-appearance: textfield;
11 }
12 /* ----------------------end---------------------- */
13 .c{margin: 0 auto;}
14 .box{width: 1004px;height: 100px;margin-top: 30px;}
15 .box .logo{width: 173px;height: 46px;background: url('../img/logo.gif') no-repeat;background-size: 100% 100%;}
16 /* 页面导航 */
17 .box ul {margin-top: 24px;height: 18px;width: 100%;}
18 .box ul li{list-style: none;font-size: 16px;float: left;margin-right: 4px;}
19 .box ul li a {color: #678cd9;}
20 /* ----------------------end---------------------- */
21 /* 支付流程 */
22 .box .shopcat {width: 986px;height: 23px;border-radius: 6px;background:#e5e5e5;margin-top: 16px;}
23 .box .shopcat div{float: left}
24 .box .shopcat .shopcat1 {width:162px;height: 23px;line-height: 23px;text-indent: 2em;font-size: 16px;}
25 .box .shopcat .shopcat2 {width: 44px;height: 23px;background: url('../img/taobao_bg.png') no-repeat}
26 .box .shopcat .shopcat1:nth-child(1){width:204px;border-radius:6px;border-top-right-radius:0;border-bottom-right-radius:0;background: #ff6600;color:white;}
27 .box .shopcat .shopcat2:nth-child(2){margin-left: -14px;width: 16px;}
28 /* ----------------------end---------------------- */
29 table{margin-bottom: 20px;}
30 table tr{height: 63px;background: #e2f2ff;text-align: center;}
31 table a {color: #678cd9; }
32 table tr:nth-child(1){height: 44px;background: none;}
33 table .hrs{height:4px;background: none;}
34 .box .cutoff{width: 1000px;height: 4px;background: #b8c9e5;}
35 table .shop{ height: 40px;text-align: left;text-indent: 2em;background:none;position: relative}
36 table .shop span{margin-right:6px;}
37 table .shop .vendor{width: 84px;height:26px;display: inline-block;background: url('../img/taobao_relation.jpg') no-repeat;position: absolute;}
38 table .add{width: 14px;height: 14px;background: url('../img/taobao_adding.jpg') no-repeat;display: inline-block;background-size: 100% 100%;}
39 table .nub {width: 30px;height: 14px;text-align: center}
40 table .minus{width: 14px;height: 14px;background: url('../img/taobao_minus.jpg') no-repeat;display: inline-block;background-size: 100% 100%;}
41 table .goods {width: 360px;padding: 8px;}
42 table .goods img{float: left;}
43 table .goods .img_r{float: left;text-align: left;width: 246px;margin-left: 10px;font-size: 12px;}
44 table .goods .img_r p{font-size: 12px;line-height: 24px;margin-top: 16px;}
45 table .goods .img_r p:nth-child(2){margin-top:0;}
46 table .goods .img_r .p1{margin-top: 0;}
47 table .goods .img_r .bz{width: 20px;height: 20px;display: inline-block;background: url('../img/taobao_icon_01.jpg') no-repeat;background-size:100% 100% }
48 table .goods .img_r .rose{width: 20px;height: 20px;display: inline-block;background: url('../img/taobao_icon_02.jpg') no-repeat;background-size:100% 100% }
49 table .last{background: none}
50 table .last td{text-align: right;}
51 table .last td:nth-child(1){text-align:left;}
52 table .last td p:nth-child(1){margin-top: 10px;}
53 table .last td p{line-height: 26px;}
54 table .last td #zj{font-size:16px;color: #ff6300;margin-right:4px;margin-left: 4px;}
55 table .last td #jf2{font-size:16px;color: #ff6300;margin-right:4px;margin-left: 4px;}
56 /* ----------------------end---------------------- */

　　js代码：

 1 // 点击全选
 2 var ck = document.getElementById('ck');
 3 var cks =document.getElementsByName('ck');
 4 ck.onclick = function (){
 5     for(var i of cks ){
 6         i.checked = true;
 7     }
 8 }
 9 
10 //更改input的值并且计算总额，调用函数，！important
11 function add(idName){
12     var open = idName.getAttribute('class'); //获取他点击的地方
13     var int = idName.parentNode.childNodes[3].value;//获取点击的int的value值
14     var price = idName.parentNode.parentNode.childNodes[7].innerHTML;//获取单价
15     var sum = idName.parentNode.parentNode.childNodes[11].innerHTML;//获取小计
16     var jf = idName.parentNode.parentNode.childNodes[5].innerHTML;//获取积分
17     var jfz = idName.parentNode.parentNode.childNodes[5].getAttribute('name');//获取购买单件商品的积分值即它的name值
18     var jf2 = document.getElementById('jf2');
19     if(open == 'add'){//判断input的class名字
20         int = parseInt(int)+1;
21     }else if(open == 'minus'){
22         if(int > 1){
23             int = parseInt(int)-1;
24         }
25     }
26     idName.parentNode.childNodes[3].value = int;//重新定义int的value值
27     idName.parentNode.parentNode.childNodes[11].innerHTML = parseInt(price) * parseInt(int);//重新定义总价
28     idName.parentNode.parentNode.childNodes[5].innerHTML = parseInt(int) * parseInt(jfz);    //定义单个商品购买可获得的积分
29 
30 }
31 
32 //价格框失去焦点时
33 var nubs = document.getElementsByName('nub');
34 for(var i of nubs){
35     i.onblur = bl;
36 }
37 function bl(fo){
38     var intv = this.value;                // 获取input框的value值
39     var price = this.parentNode.parentNode.childNodes[7].innerHTML;        //获取商品的单价
40     var jf = this.parentNode.parentNode.childNodes[5].innerHTML;//获取积分
41     var jfz = this.parentNode.parentNode.childNodes[5].getAttribute('name');//获取购买单件商品的积分值即它的name值
42     this.parentNode.parentNode.childNodes[11].innerHTML = parseInt(price) * parseInt(intv);
43     this.parentNode.parentNode.childNodes[5].innerHTML = parseInt(intv) * parseInt(jfz);    //定义单个商品购买可获得的积分
44 }
45 
46 //更改积分和总价
47 var bo = document.getElementsByTagName('body')[0];
48 bo.onload = com;
49 function com(){
50     var zjf = document.getElementById('jf2');//获取总积分
51     var zj = document.getElementById('zj');//获取在总价
52     var jf = document.getElementsByClassName('jf');//获取单件商品的积分
53     var xj = document.getElementsByClassName('xj');//获取单件商品的小计
54     var jfz = 0 ;    //定义所有商品的积分为0
55     var xjz = 0 ;
56     for (var x = 0;x<jf.length;x++){
57         jfz = jfz + parseInt(jf[x].innerHTML); //循环单件商品的积分并且累加到 jfz 中;
58     }
59     for (var i = 0;i<xj.length;i++){
60         xjz = xjz + parseInt(xj[i].innerHTML); //循环单件商品的小计并且累加到 xjz 中;
61     }
62     zjf.innerHTML = jfz ; //定义所有商品的总积分
63     zj.innerHTML = xjz ; //定义所有商品的总价
64 }
65 
66 //单个删除商品
67 var dels = document.getElementsByClassName('del');
68 for(var x of dels){
69     x.onclick = del ;
70 }
71 function del(){
72     this.parentNode.parentNode.previousSibling.previousSibling.remove();//previousSibling 上一个兄弟
73     this.parentNode.parentNode.remove();
74 }
75 
76 //多选框打钩的删除
77 var dele = document.getElementById('alldel'); //获取删除所选的按钮
78 dele.onclick = delec ;        //添加点击事件
79 function delec(){
80     var cks = document.getElementsByName('ck');  //获取每个多选框
81     console.log(cks);
82     for (var i=cks.length-1;i>=0;i--){
83         if(cks[i].checked == true){    //循环每个多选框，若他的checked值为true这删除他和她的父亲
84             cks[i].parentNode.parentNode.previousSibling.previousSibling.remove();
85             cks[i].parentNode.parentNode.remove();
86             ck.checked = false;
87         }
88     }
89 }