Vampire-blog通过本文主要向大家介绍了JavaScript实现类似淘宝的购物车效果等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
前言
相信大家都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。本文介绍的是通过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 id="cartTable"> <thead> <tr> <th><label><input class="check-all check" type="checkbox"/> 全选</label></th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td class="checkbox"><input class="check-one check" type="checkbox" /></td> <td class="goods"><img src="images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td> <td class="price">5999.88</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td> <td class="subtotal">5999.88</td> <td class="operation"><span class="delete">删除</span></td> </tr> <tr> <td class="checkbox"><input class="check-one check" type="checkbox" /></td> <td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td> <td class="price">3888.50</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td> <td class="subtotal">3888.50</td> <td class="operation"><span class="delete">删除</span></td> </tr> <tr> <td class="checkbox"><input class="check-one check" type="checkbox" /></td> <td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td> <td class="price">1428.50</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td> <td class="subtotal">1428.50</td> <td class="operation"><span class="delete">删除</span></td> </tr> <tr> <td class="checkbox"><input class="check-one check" type="checkbox" /></td> <td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td> <td class="price">640.60</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td> <td class="subtotal">640.60</td> <td class="operation"><span class="delete">删除</span></td> </tr> </tbody> </table> <div class="foot" id="foot"> <label class=" fl select-all"><input type="checkbox" class="check-all check" /> 全选</label> <a class="fl delete" id="deleteAll" href="javascript:;" rel="external nofollow" >删除</a> <div class="fr closing">结 算</div> <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div> <div class="fr select" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div> <div class="selected-view"> <div id="selectedViewList" class="clearfix"> <div><img src="images/1.jpg"><span>取消选择</span></div> </div> <span class="arrow">◆<span>◆</span></span> </div> </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