淘宝购物车效果
淘寶購物車效果
今天給大家帶來的是淘寶購物車效果，寫的不怎么好，請大家多多指教。
效果：
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 }?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： vue-resource
- 下一篇： css实现左（右）侧固定宽度，右（左）侧