用javascript实现的购物车实例
基于javascript实现的购物车实例：javascript
首先是效果和功能，以下图所示，具备购物车的基本功能。css
包括一、选中和全选商品；二、商品数量的增减；三、单个商品价格的计算；四、总价的计算；五、删除商品。html
1、界面布局java
使用的是table来进行布局，因为用js来获取tr 和 td节点的时候，能够获取带下标的元素集合，操做起来较为便利。node
html+css的代码以下：ide
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>购物车</title> 6 <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>
2、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 }