前言
相信大家都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。本文介绍的是通过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结构：
件
取消选择css代码：
Box{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,.5);
cursor: pointer;
}
#selectedViewList div:hover span{
display: block;
}
js部分：
1）实现商品的全选功能及数量和价格的计算
获取table下的tbody下的每一行
var checkInputs = document.getElementsByClassName('check');
var checkAllInputs = document.getElementsByClassName('check-all');
var selectedTotal = document.getElementById('selectedTotal');
var priceTotal = document.getElementById('priceTotal');
//计算总数和价格
function getTotal(){
var selected = 0;
var price = 0;
for(var i=0;i < tr.length; i++){
if(tr[i].getElementsByTagName('input')[0].checked){
selected += parseInt(tr[i].getElementsByTagName('input')[1].value);
price += parseFloat(tr[i].cells[4].innerHTML);//cells属性为获得tr下面的td
}
}
selectedTotal.innerHTML = selected;
priceTotal.innerHTML = price.toFixed(2);//保留两位小数
}
for(var i=0;i
2)点击已选商品实现商品预览浮层的功能
点击已选商品时会显示出已选择商品的列表
js代码：
属性为获得tr下面的td
HTMLstr += '[0].src + ')
取消选择';
}
else{
tr[i].className = '';
}
}
selectedTotal.innerHTML = selected;
priceTotal.innerHTML = price.toFixed(2);//保留两位小数
selectedViewList.innerHTML = HTMLstr;
if(selected == 0){
foot.className = 'foot';
}
}
for(var i=0;iselected.onclick = function(){
if(foot.className == 'foot'){
if(selectedTotal.innerHTML != 0){
foot.className = 'foot show';
}
}else{
foot.className = 'foot';
}
}
if(foot.className == 'foot'){
if(selectedTotal.innerHTML != 0){
foot.className = 'foot show';
}
}else{
foot.className = 'foot';
}
}
3)商品列表中的取消选择与事件代理
已选商品列表中没有appendChild的时候div和span都不存在，所以要使用事件代理。
4）实现增减商品数量及小计价格的计算
数量事件代理
for(var i=0;i 1){
input.value = val - 1;
getsubTotal(this);
}else{
reduce.innerHTML = '';
}
}
getTotal();
}
tr[i].getElementsByTagName('input')[1].onkeyup = function(){
var val = parseInt(this.value);
var tr = this.parentNode.parentNode;//this指的是当前的input，其父节点的父节点就是当前的tr
var reduce = tr.getElementsByTagName('span')[1];
if(isNaN(val) || val < 1){
val = 1;
}
this.value = val;//保证输入框中都是大于1的纯数字
if(val <= 1){
reduce.innerHTML = '';
}
else{
reduce.innerHTML = '-';
}
getsubTotal(tr);
getTotal();
}
}
5）实现删除商品功能
学会用for循环删除数组中的一些数据时要回置下标 i 。
删除商品
deleteAll.onclick = function(){
if(selectedTotal.innerHTML != '0'){
var conf = confirm("确定要删除所选商品吗");
if(conf){
for(var i=0;i删除数组中的一个后，后面的索引就会向前移，此时要让i也向前移一个，回置下标i
}
}
getTotal();
}
}
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/js/40678.html