基于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 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 }
原文地址：https://www.cnblogs.com/cauzinc/p/8549574.html
时间： 2024-10-15 06:02:02