JavaScript实现类似淘宝的购物车效果

相信大家都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。本文介绍的是通过JavaScript实现类似于淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能。

功能如下

1. 实现兼容低版本IE的getElementsByClassName()方法

2. JS表格操作

3. 通过parseInt() ，parseFloat()把字符串转换成数字

4. 通过toFixed()把数字格式化成指定位数的小数

5. 事件代理的运用

效果图：

border-collapse有两个值可以选择，分别是collapse和separate，就是合并边框和分离边框，分离边框之下又可以设置间距和边框样式

border-spacing:2em 4em;（设置右间距和下间距）

border-style:none solid dashed dotted;（分别设置上右下左的样式）

html结构：

<table> <thead> <tr> <th><label><input type="checkbox"/>&nbsp;全选</label></th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td><img src="https://www.jb51.net/images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td> <td>5999.88</td> <td><span></span><input type="text" value="1"/><span>+</span></td> <td>5999.88</td> <td><span>删除</span></td> </tr> <tr> <td><input type="checkbox" /></td> <td><img src="https://www.jb51.net/images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td> <td>3888.50</td> <td><span></span><input type="text" value="1"/><span>+</span></td> <td>3888.50</td> <td><span>删除</span></td> </tr> <tr> <td><input type="checkbox" /></td> <td><img src="https://www.jb51.net/images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td> <td>1428.50</td> <td><span></span><input type="text" value="1"/><span>+</span></td> <td>1428.50</td> <td><span>删除</span></td> </tr> <tr> <td><input type="checkbox" /></td> <td><img src="https://www.jb51.net/images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td> <td>640.60</td> <td><span></span><input type="text" value="1"/><span>+</span></td> <td>640.60</td> <td><span>删除</span></td> </tr> </tbody> </table> <div> <label><input type="checkbox" />&nbsp;全选</label> <a href="javascript:;" >删除</a> <div>结 算</div> <div>合计：￥<span>0.00</span></div> <div>已选商品<span>0</span>件<span>︽</span><span>︾</span></div> <div> <div> <div><img src="https://www.jb51.net/images/1.jpg"><span>取消选择</span></div> </div> <span>◆<span>◆</span></span> </div> </div>

css代码：

*{ margin: 0; padding: 0; } a{ color: #666; text-decoration: none; } body{ padding:20px; color: #666; } .fl{ float: left; } .fr{ float: right; } table{ border-collapse: collapse; border-spacing: 0; border: 0; text-align: center; width: 937px; } th,td{ border: 1px solid #cadeff; } th{ background: #e2f2ff; border-top: 3px solid #a7cbff; height: 30px; } td{ padding: 10px; color: #444; } tbody tr:hover{ background: RGB(238,246,255); } .checkbox{width: 60px;} .goods{width: 300px;} .goods span{ width: 180px; margin-top: 20px; text-align: left; float: left; } .price{width: 130px;} .count{width: 90px;} .count .add, .count input, .count .reduce{ float: left; margin-left: -1px; position: relative; z-index: 0; } .count .add, .count .reduce{ height: 23px; width: 17px; border: 1px solid #e5e5e5; background: #f0f0f0; text-align: center; line-height: 23px; color: #444; } .count .add:hover, .count .reduce:hover{ color: #f50; z-index: 3; border-color: #f60; cursor: pointer; } .count input{ width: 50px; height: 15px; line-height: 15px; border: 1px solid #aaa; color: #343434; text-align: center; padding: 4px 0; background-color: #fff; z-index: 2; } .subtotal{ width: 150px; color: red; font-weight: bold; } .operation{width: 80px;} .operation span:hover, .a:hover{ cursor: pointer; color: red; text-decoration: underline; } img{ width: 100px; height: 80px; margin-right: 10px; float: left; } .foot{ width: 935px; margin-top: 10px; color: #666; height: 48px; border: 1px solid #c8c8c8; background-image: linear-gradient(RGB(241,241,241),RGB(226,226,226)); position: relative; z-index: 8; } .foot div, .foot a{ line-height: 48px; height: 48px; } .foot .select-all{ width: 100px; height: 48px; line-height: 48px; padding-left: 5px; color: #666; } .foot .closing{ border-left: 1px solid #c8c8c8; width: 100px; text-align: center; color: #000; font-weight: bold; background: RGB(238,238,238); cursor: pointer; } .foot .total{ margin: 0 20px; cursor: pointer; } .foot #priceTotal, .foot #selectedTotal{ color: red; font-family: "微软雅黑"; font-weight: bold; } .foot .select{ cursor: pointer; } .foot .select .arrow{ position: relative; top: -3px; margin-left: 3px; } .foot .select .down{ position: relative; top: 3px; display: none; } .show .select .down{ display: inline; } .show .select .up{ display: none; } .foot .select:hover .arrow{ color: red; } .foot .selected-view{ width: 935px; border: 1px solid #c8c8c8; position: absolute; height: auto; background: #fff; z-index: 9; bottom: 48px; left: -1px; display: none; } .show .selected-view{display: block;} .foot .selected-view div{height: auto;} .foot .selected-view .arrow{ font-size: 16px; line-height: 100%; color: #c8c8c8; position: absolute; right: 330px; bottom: -9px; } .foot .selected-view .arrow span{ color: #fff; position: absolute; left: 0; bottom: 1px; } #selectedViewList{ padding: 20px; margin-bottom: -20px; } #selectedViewList div{ display: inline-block; position: relative; width: 100px; height: 80px; border: 1px solid #ccc; margin: 10px; } #selectedViewList div span{ display: none; color: #fff; font-size: 12px; position: absolute; top: 0; right: 0; width: 60px; height: 18px; line-height: 18px; text-align: center; background: RGBA(0,0,0,.5); cursor: pointer; } #selectedViewList div:hover span{ display: block; }

js部分：

1）实现商品的全选功能及数量和价格的计算