用javascript實現的購物車實例
阿新 • • 發佈：2018-03-12
close meta parseint ces post count ret selected html 
基於javascript實現的購物車實例：
首先是效果和功能，如下圖所示，具有購物車的基本功能。
包括1、選中和全選商品；2、商品數量的增減；3、單個商品價格的計算；4、總價的計算；5、刪除商品。
一、界面布局
使用的是table來進行布局，由於用js來獲取tr 和 td節點的時候，可以獲取帶下標的元素集合，操作起來較為便利。
html+css的代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>購物車</title> 6View Code<style> 7 *{margin:0px; padding:0px;} 8 table,td,td{ 9 border:1px solid #000000; 10 font-size:10px; 11 } 12 table{ 13 display: block; 14 } 15 16 img{ 17 float:left; 18 } 19 tr{20 text-align: center; 21 } 22 #box{ 23 width:900px; 24 } 25 26 #cart{ 27 float:left; 28 border-collapse:collapse; 29 } 30 #head{ 31 background:#F0FFFF; 32 } 33 #settlement{34 margin-top:20px; 35 width:805px; 36 height:30px; 37 border:1px solid #EBEBEB; 38 float:left; 39 background: #EBEBEB; 40 41 font-size:10px; 42 line-height:30px ; 43 } 44 #settlement div{ 45 float:left; 46 } 47 #addupto{ 48 color:#ff0000; 49 font-weight:700; 50 } 51 #NumofGoods{ 52 color:#ff0000; 53 font-weight:700; 54 } 55 56 .goods{ 57 padding:5px; 58 text-align: left; 59 } 60 .number{ 61 position:relative; 62 left:19px; 63 width:60px; 64 height:10px; 65 border:1px solid #cccccc; 66 } 67 68 .acc{ 69 width:40px; 70 height:10px; 71 border-left:0px solid #cccccc; 72 border-right:0px solid #cccccc; 73 line-height: 10px; 74 float:left; 75 } 76 .desymbol{ 77 width:10px; 78 height:10px; 79 line-height: 10px; 80 background:#ccc; 81 float:left; 82 cursor:pointer; 83 } 84 .adsymbol{ 85 width:10px; 86 height:10px; 87 line-height: 10px; 88 background:#ccc; 89 float:right; 90 cursor: pointer; 91 } 92 /*.dele{ 93 cursor: pointer; 94 }*/ 95 .total{ 96 color:#ff0000; 97 font-weight:700; 98 } 99 </style> 100 </head> 101 <body> 102 <div id="box"> 103 <table id="cart"> 104 <tr id="head"> 105 <td width="50px"><input class="allSelect" type="checkbox"> 全選</td> 106 <td width="400px;">商品</td> 107 <td width="100px">單價</td> 108 <td width="100px">數量</td> 109 <td width="100px">小計</td> 110 <td width="50px">操作</td> 111 </tr> 112 <tr> 113 <td><input class="select" type="checkbox"></td> 114 <td class="goods"><img src="img/goods1.jpg">外星人筆記本電腦17 R4 15R3 13寸 17寸 alienware今晚吃雞遊戲本</td> 115 <td class="price">12888.00</td> 116 <td> 117 <div class="number"> 118 <div class="desymbol">-</div> 119 <div class="acc">1</div> 120 <div class="adsymbol">+</div> 121 </div> 122 </td> 123 <td class="total"></td> 124 <td class="dele">刪除</td> 125 </tr> 126 <tr> 127 <td><input class="select" type="checkbox"></td> 128 <td class="goods"><img src="img/goods2.jpg">任天堂（Nintendo）Switch 家用遊戲機 掌機NS智能體感遊戲主機</td> 129 <td class="price">2258.00</td> 130 <td> 131 <div class="number"> 132 <div class="desymbol">-</div> 133 <div class="acc">1</div> 134 <div class="adsymbol">+</div> 135 </div> 136 </td> 137 <td class="total"></td> 138 <td class="dele">刪除</td> 139 </tr> 140 <tr> 141 <td><input class="select" type="checkbox"></td> 142 <td class="goods"><img src="img/goods3.jpg">Microsoft/微軟 Surface Pro i5 8G 256G 筆記本平板電腦二合一</td> 143 <td class="price">4999.00</td> 144 <td> 145 <div class="number"> 146 <div class="desymbol">-</div> 147 <div class="acc">1</div> 148 <div class="adsymbol">+</div> 149 </div> 150 </td> 151 <td class="total"></td> 152 <td class="dele">刪除</td> 153 </tr> 154 <tr> 155 <td><input class="select" type="checkbox"></td> 156 <td class="goods"><img src="img/goods4.jpg">Apple/蘋果 10.5 英寸 iPad Pro</td> 157 <td class="price">3666.00</td> 158 <td> 159 <div class="number"> 160 <div class="desymbol">-</div> 161 <div class="acc">1</div> 162 <div class="adsymbol">+</div> 163 </div> 164 </td> 165 <td class="total"></td> 166 <td class="dele">刪除</td> 167 </tr> 168 </table> 169 170 <div id="settlement"> 171 <div style="width:550px"><input class="allSelect" type="checkbox"> 全選</div> 172 <div style="width:120px">全選商品<span id="NumofGoods"></span><span>件^</span></div> 173 <div style="width:80px">合計：￥<span id="addupto"></span></div> 174 <div style="width:50px;text-align: center;border-left:1px solid #000000;">結算</div> 175 </div> 176 177 </div> 178 179 <script src="cart.js"></script> 180 </body> 181 </html>
二、javascript代碼
自行封裝了getClasses（）函數，避免兼容性問題。
1 var prices = getClasses("price"), 2 cart = document.getElementById("cart"); 3 acc = getClasses("acc"), 4 totals = getClasses("total"), 5 detracts = getClasses("desymbol"), 6 adds = getClasses("adsymbol"), 7 NumofGoods = document.getElementById("NumofGoods"), 8 addupto = document.getElementById("addupto"), 9 allSelect = getClasses("allSelect"), 10 select = getClasses("select"), 11 dele = getClasses("dele"); 12 13 count(); 14 countAll(); 15 16 for(var i=0; i<allSelect.length; i++ ){ 17 allSelect[i].onclick = function(){ 18 for(var j=0; j<select.length; j++){ 19 select[j].checked = this.checked; 20 } 21 for(j=0; j<allSelect.length; j++){ 22 allSelect[j].checked = this.checked; 23 } 24 //每次點擊選框就計算一次總價 25 countAll(); 26 } 27 } 28 29 for(i=0; i<select.length; i++){ 30 select[i].onclick = function(){ 31 if(ifAllSelected()){ 32 for(j=0; j<allSelect.length; j++){ 33 allSelect[j].checked = true; 34 } 35 } 36 if(ifNotAllSelected()){ 37 for(j=0; j<allSelect.length; j++){ 38 allSelect[j].checked = false; 39 } 40 } 41 countAll(); 42 } 43 } 44 45 for(i=0; i<adds.length; i++){ 46 47 adds[i].onclick = function(){ 48 console.log(this.parentNode.childNodes[3].innerHTML); 49 var num = parseInt(this.parentNode.childNodes[3].innerHTML); 50 num += 1; 51 this.parentNode.childNodes[3].innerHTML = num; 52 count(); 53 countAll(); 54 } 55 detracts[i].onclick = function(){ 56 var num = parseInt(this.parentNode.childNodes[3].innerHTML); 57 num -= 1; 58 if(num<1){ 59 num=1; 60 } 61 this.parentNode.childNodes[3].innerHTML = num; 62 count(); 63 countAll(); 64 } 65 //刪除時也應該重新計算總價，或者先判斷商品是否被選中，有選中則重新計算 66 dele[i].onclick = function(){ 67 cart.childNodes[1].removeChild(this.parentNode); 68 countAll(); 69 } 70 } 71 72 //避免兼容性問題，自行封裝classname 73 function getClasses(className){ 74 var arr = [], 75 nodes = document.getElementsByTagName("*"); 76 for(var i=0; i<nodes.length; i++){ 77 if(nodes[i].className == className){ 78 arr.push(nodes[i]); 79 } 80 } 81 return arr; 82 } 83 84 //進行單價的計算，保留兩位小數 85 function count(){ 86 for(var i=0; i<prices.length; i++){ 87 totals[i].innerHTML = (prices[i].innerHTML*acc[i].innerHTML).toFixed(2); 88 } 89 } 90 //計算總價的函數 91 function countAll(){ 92 var num1=0; 93 var num2=0; 94 //註意，每次計算總價應該重新取得一次select,acc和totals，因為執行刪除操作時，會讓這幾個值發生變化 95 var select = getClasses("select"), 96 acc = getClasses("acc"), 97 totals = getClasses("total"); 98 for(var i=0; i<select.length; i++){ 99 if(select[i].checked == true){ 100 num1 += parseInt(acc[i].innerHTML); 101 num2 += parseFloat(totals[i].innerHTML); 102 } 103 } 104 NumofGoods.innerHTML = num1; 105 addupto.innerHTML = num2; 106 } 107 108 //判斷是否全部選中或者全部沒有選中的函數 109 function ifAllSelected(){ 110 var allSelected = true; 111 112 for(var i=0; i<select.length; i++){ 113 if(select[i].checked == false){ 114 allSelected = false; 115 } 116 } 117 return allSelected; 118 } 119 function ifNotAllSelected(){ 120 var notAllSelected = false; 121 for(var i=0; i<select.length; i++){ 122 if(select[i].checked == false){ 123 notAllSelected = true; 124 } 125 } 126 return notAllSelected; 127 }
用javascript實現的購物車實例