用javascript实现的购物车实例

基于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>
  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             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             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             60px;
 64             height:10px;
 65             border:1px solid #cccccc;
 66         }
 67 
 68         .acc{
 69             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             10px;
 78             height:10px;
 79             line-height: 10px;
 80             background:#ccc;
 81             float:left;
 82             cursor:pointer;
 83         }
 84         .adsymbol{
 85             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="550px"><input class="allSelect" type="checkbox">    全选</div>
172         <div style="120px">全选商品<span id="NumofGoods"></span><span>件^</span></div>
173         <div style="80px">合计：¥<span id="addupto"></span></div>
174         <div style="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>

View Code

二、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 }