基于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>