您的位置：首页 > Web前端 > JavaScript

Js实现淘宝购物车类似功能(DOM综合应用)

2018-02-18 14:55 876 查看
ShoppingCart 购物车这个前端Deom中的很多功能是使用js脚本实现的。 
具体效果有：
1.可以全选，全不选商品。
2.选中的商品，点击下面“删除所选”按钮可以批量删除
3.每个商品，可以在该商品信息栏最后的“删除”按钮删除该商品
4.每个商品，可以在该商品信息栏增加或减少商品的数量，改变后该商品的小计价格及最后的商品总价自动发生变化。
阅读提示：
html是网上练习的模板，css部分也没有什么好说的，请重点关注js部分代码实现。

代码实现

Html部分代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘宝购物车页面</title>
<link href="css/myCart.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/myCart.js"></script>
</head>

<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看购物车</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 确认订单信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付宝</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 确认收货</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 评价</li>
<li class="navlist_gray_right"></li>
</ul>
</div>

<div id="content">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<form action="" method="post" name="myform">
<tr>
<td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" />全选</td>
<td class="title_2" colspan="2">店铺宝贝</td>
<td class="title_3">获积分</td>
<td class="title_4">单价（元）</td>
<td class="title_5">数量</td>
<td class="title_6">小计（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>

<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a>    卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product1">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a hre
4000
f="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
颜色：棕色 尺码：37<br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')" class="hand"/> <input id="num_1" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')"  class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除</a></td>
</tr>

<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a>    卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product2">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">265.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_2','minus')" class="hand"/> <input id="num_2" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_2','add')"  class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除</a></td>
</tr>

<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a>    卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product3">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"  onclick="selectSingle()"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">3</td>
<td class="cart_td_5">85.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')" class="hand"/> <input id="num_3" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_3','add')"  class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除</a></td>
</tr>

<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a>    卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product4">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="selectSingle()" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">12.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4','minus')" class="hand"/> <input id="num_4" type="text"  value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_4','add')"  class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除</a></td>
</tr>

<tr>
<td  colspan="3"><a href="javascript:deleteSelectRow()"><img  src="images/taobao_del.jpg" alt="delete"/></a></td>
<td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
可获积分 <label class="yellow" id="integral"></label> 点<br />
<input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
</tr>
</form>
</table>

</div>
</body>
</html>

css部分：

@charset "gb2312";
/* CSS Document */

body{
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0px;
padding:0px;
}
a{
color:#1965b3;
text-decoration: none;
}
a:hover{
color:#CD590C;
text-decoration:underline;
}
img{
border:0px;
vertical-align:middle;
}
#header{
height:40px;
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#nav{
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#navlist{
width:800px;
margin:0px auto 0px auto;
height:23px;
}
#navlist li{
float:left;
height:23px;
line-height:26px;
}
.navlist_red_left{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -92px;
width:3px;
}
.navlist_red{
background-color:#ff6600;
text-align:center;
font-size:14px;
font-weight:bold;
color:#FFF;
width:130px;
}
.navlist_red_arrow{
background-color:#ff6600;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray{
background-color:#e4e4e4;
text-align:center;
font-size:14px;
font-weight:bold;
width:150px;
}
.navlist_gray_arrow{
background-color:#e4e4e4;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray_right{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -138px;
width:3px;
}
#content{
width:800px;
margin:10px auto 5px auto;
clear:both;
}
.title_1{
text-align:center;
width:50px;
}
.title_2{
text-align:center;
}
.title_3{
text-align:center;
width:80px;
}
.title_4{
text-align:center;
width:80px;
}
.title_5{
text-align:center;
width:100px;
}
.title_6{
text-align:center;
width:80px;
}
.title_7{
text-align:center;
width:60px;
}
.line{
background-color:#a7cbff;
height:3px;
}
.shopInfo{
padding-left:10px;
height:35px;
vertical-align:bottom;
}
.num_input{
border:solid 1px #666;
width:25px;
height:15px;
text-align:center;
}
.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
background-color:#e2f2ff;
border-bottom:solid 1px #d1ecff;
border-top:solid 1px #d1ecff;
text-align:center;
padding:5px;
}
.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
border-right:solid 1px #FFF;
}
.cart_td_3{
text-align:left;
}
.cart_td_4{
font-weight:bold;
}
.cart_td_7{
font-weight:bold;
color:#fe6400;
font-size:14px;
}
.hand{
cursor:pointer;
}
.shopend{
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
.yellow{
font-weight:bold;
color:#fe6400;
font-size:18px;
line-height:40px;
}

js部分：

// JavaScript Document

/*改变所购商品的数量*/
function changeNum(numId,flag){/*numId表示对应商品数量的文本框ID，flag表示是增加还是减少商品数量*/
var tom=document.getElementById(numId);
if(flag=='add'){
tom.value++;
}
if(flag=='minus'){
if (tom.value > 1) {
tom.value=tom.value-1;
}
}
getSubTotal(tom.parentNode.parentNode.id);
productCount();
}
function getSubTotal(tr) {
var tds=document.getElementById(tr);
var price = parseFloat(tds.cells[4].innerHTML);//获取价格
var count = parseInt(tds.cells[5].getElementsByTagName('input')[0].value);//获取数量
var SubTotal = parseFloat(price * count);
tds.cells[6].innerHTML = SubTotal.toFixed(2);//四舍五入
}
/*自动计算商品的总金额、总共节省的金额和积分*/
function productCount(){
var checkAllInputs = document.getElementById('allCheckBox');
var tableTr=document.getElementById("shopping").getElementsByTagName("tr");
var total=0;      //所有商品的总计
var integral=0;   //所有商品的积分
console.log(tableTr);
if(tableTr.length==3){
checkAllInputs.checked=false;
}
var checkInputs = document.getElementsByName("cartCheckBox");
for(var i=0;i< checkInputs.length;i++){
var point=0;      //每一行商品的单品积分
var price=0;     //每一行商品的单价
var nums=0;    //每一行商品的数量

if(checkInputs[i].checked) { //判断复选框是否被选中
var c=checkInputs[i].parentNode.parentNode;
point=c.childNodes[7].innerHTML;  //选中行商品的单品积分
price=c.childNodes[9].innerHTML;  //选中行商品的单价
nums=c.childNodes[11].childNodes[2].value; //选中行商品的数量
console.log(nums);
integral+=point*nums;  //所有商品的积分的和 = 每一行商品的单价积分 x 数量   相加
total+=price*nums;//所有商品的总计的和 = 每一个商品的单价 x 数量   相加
c.childNodes[13].innerHTML=price*nums;  //商品小计 =商品的单价 x 数量
} else {
total+=0;//思考这里为什么是“+=”
integral+=0;
}
}
document.getElementById("total").innerHTML=total;
document.getElementById("integral").innerHTML=integral;
}

window.onload=productCount; //onload函数，让页面加载后自动计算商品总额

/*复选框全选或全不选效果*/
function selectAll(){
var checkInputs = document.getElementsByName("cartCheckBox");
var checkAllInputs = document.getElementById('allCheckBox');
for(var i=0;i< checkInputs.length;i++){
checkInputs[i].checked=checkAllInputs.checked;
}
}

/*根据单个复选框的选择情况确定全选复选框是否被选中*/
function selectSingle(){
var checkInputs = document.getElementsByName("cartCheckBox");
var checkAllInputs = document.getElementById('allCheckBox');
var count=0;
for(var i=0;i< checkInputs.length;i++){
if(checkInputs[i].checked) {
count++;
}
if (count === checkInputs.length ) {//判断是否全选
checkAllInputs.checked = true;
selectAll();
} else {
checkAllInputs.checked=false;
}
}
productCount();
}

/*删除单行商品*/
function deleteRow(rowId){
var t = document.getElementById(rowId);
t.previousSibling.previousSibling.remove();
t.remove();
productCount();
}

/*删除选中行的商品*/
function deleteSelectRow() {
var inp=document.getElementsByName("cartCheckBox");  //获取每个多选框
for (var i=inp.length-1;i>=0;i--){//若顺序则无法删除所有
if(inp[i].checked){
inp[i].parentNode.parentNode.previousSibling.previousSibling.remove();
inp[i].parentNode.parentNode.remove();
inp.checked = false;//思考这里为什么不用数组下标
productCount();
}
}
}

总结：

js实现部分主要有三个需要重点关注地方。
选框的检测与互动
删除功能与其他功能间的耦合
计算函数与其他函数之间的同步

1.选框的检测与互动

要保证全选框选中后，每个商品的选框都能自动被选中，并且若取消选中其中一个商品，全选框也会被取消选中。然后是，每个商品选择框被选中后，全选框也会被自动选上。

2.删除功能与其他功能间的耦合

要保证删除选中框的删除按钮和每个商品后删除的按钮都能实现删除功能，并且要注意全选时，若删除所有商品，全选框也会被取消选中。

3.计算函数与其他函数之间的同步

要保证，商品选框被选中后能计算出商品总价及所获积分，并且删除商品后，商品总价和所获积分也随之更新。

综上：在不考虑服务器后台情况下，该js部分代码较为完整实现了类淘宝购物车功能。但代码还不够优雅，仍有许多可以优化的地方，希望大家多多指教，谢谢！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航