今天写了一个购物车基础功能的js,分享给大家看一下,具体效果自己可以复制了看看,词穷形容不出来
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 重置样式表 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 公共样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 页面样式 -->
<link rel="stylesheet" href="css/style.css">
<script src="common.js"></script>
<script>
window.function () {
//全选全不选
var chec0=my$("chec1")
var chec1=my$("chec2")
var chec2=my$("chec3")
var chec3=my$("chec4")
var chec4=my$("chec5")
var chec=[chec1,chec2,chec3,chec4]
var jian=myC("xian05-1")
var jia=myC("xian05-3")
var shuLiang=myC("xian05-2")
var index=0;
var jiFen=myC("xian03")
var jiFenB=["5","12","3","6"]
var danJia=[138,265,85,12]
var xiaoJI=myC("xian06")
var zongJia=my$("zongJia")
var zongJiFen=my$("zongJiFen")
var num5=Number(zongJia.innerHTML)
var num6=Number(zongJiFen.innerHTML)
var shanChu=my$("shanChu")
var gouW1=my$("gouwu-z01")
var gouW2=my$("gouwu-z02")
var gouW3=my$("gouwu-z03")
var gouW4=my$("gouwu-z04")
var gouWu=[gouW1,gouW2,gouW3,gouW4]
chec0.onclick=function () {
for (var i=0;i<chec.length;i++){
var num=Number(shuLiang[i].value)
var num3=Number(jiFenB[i])
console.log(num3);
console.log(danJia[i]);
if (chec0.checked){
num6+=num*num3;
zongJiFen.innerHTML=num6;
num5+=num*danJia[i]
zongJia.innerHTML=num5;
}else{
num5=0;
num6=0;
zongJia.innerHTML=num5;
zongJiFen.innerHTML=num6;
}
chec[i].checked=this.checked
}
}
for (var i=0;i<chec.length;i++){
chec[i].setAttribute("index",i)
chec[i].onclick=function () {
index=this.getAttribute("index")
var num=Number(shuLiang[index].value)
var num3=Number(jiFenB[index])
console.log(num);
console.log(num3);
console.log(danJia[index]);
var flag=true;
if (chec[index].checked){
num5+=num*danJia[index];
num6+=num*num3;
zongJia.innerHTML=num5;
zongJiFen.innerHTML=num6;
}else{
num5-=num*danJia[index];
num6-=num*num3;
zongJia.innerHTML=num5;
zongJiFen.innerHTML=num6;
}
for (var j=1;j<chec.length;j++){
if (!chec[j].checked) {
flag=false;
break;
}
}
chec0.checked=flag;
}
};
//添加数量减少数量
for (var i=0;i<jia.length;i++){
jia[i].setAttribute("index",i)
jia[i].onclick=function () {
index=this.getAttribute("index")
var num=Number(shuLiang[index].value)
var num2=Number(jiFen[index].innerHTML)
var num3=Number(jiFenB[index])
var num4=Number(xiaoJI[index].innerHTML)
num+=1;
num2=num2+num3
num4=num4+danJia[index];
if (chec[index].checked) {
num5+=danJia[index]
num6=num6+num3
}
shuLiang[index].value=num
jiFen[index].innerHTML=num2
xiaoJI[index].innerHTML=num4
zongJia.innerHTML=num5
zongJiFen.innerHTML=num6
}
}
for (var i=0;i<jian.length;i++){
jian[i].setAttribute("index",i)
jian[i].onclick=function () {
index=Number(this.getAttribute("index"));
var num=Number(shuLiang[index].value)
var num2=Number(jiFen[index].innerHTML)
var num3=Number(jiFenB[index])
var num4=Number(xiaoJI[index].innerHTML)
if (num<=1){
console.log("1111");
num-=0;
num2-=0;
num4-=0;
chec[index].checked="";
num5=0;
num6=0;
}
else{
num-=1;
num2=num2-num3
num4=num4-danJia[index];
if (chec[index].checked) {
num5-=danJia[index]
num6=num6-num3
}
}
shuLiang[index].value=num
jiFen[index].innerHTML=num2
xiaoJI[index].innerHTML=num4;
zongJia.innerHTML=num5
zongJiFen.innerHTML=num6
}
}
//计算总价 总积分
//删除所选
shanChu.onclick=function () {
for(var i=0;i<chec.length;i++){
var num=Number(shuLiang[i].value)
var num3=Number(jiFenB[i])
if (chec[i].checked){
gouWu[i].style.display="none"
num5-=num*danJia[i];
num6-=num*num3;
zongJia.innerHTML=num5
zongJiFen.innerHTML=num6
chec[i].checked="";
}
}
}
//左侧删除按钮
var shanChu=[my$("shanChu0"),my$("shanChu1"),my$("shanChu2"),my$("shanChu3")]
console.log(shanChu);
for (var i=0;i<shanChu.length;i++){
shanChu[i].setAttribute("index",i)
shanChu[i].onclick=function () {
index=Number(this.getAttribute("index"));
gouWu[index].style.display="none"
var num=Number(shuLiang[index].value)
var num3=Number(jiFenB[index])
console.log(chec[index].checked);
if (chec[index].checked){
num5-=num*danJia[index];
num6-=num*num3;
zongJia.innerHTML=num5
zongJiFen.innerHTML=num6
chec[index].checked="";
}
}
}
}
</script>
</head>
<body>
<!-- 头部 -->
<div class="top">
<div class="top-z">
<div class="top-zuo zuof">
<img src="images/taobao_logo.gif" alt="">
<ul>
<li>你的位置：</li>
<li><a href="">首页</a></li>
<li>></li>
<li><a href="">我的淘宝</a></li>
<li>></li>
<li>我的购物车</li>
</ul>
</div>
</div>
</div>
<!-- 导航栏 -->
<div class="dao">
<div class="dao-z">
<ul>
<li class="orange">1.查看购物车</li>
<li>2.确认订单信息</li>
<li>3.付款到支付宝</li>
<li>4.确认收货</li>
<li>5.评价</li>
</ul>
<div class="jing01"></div>
<div class="jing02"></div>
<div class="jing03"></div>
<div class="jing04"></div>
<div class="jing05"></div>
<div class="jing06"></div>
</div>
</div>
<!-- 购物车 -->
<div class="gouwu">
<div class="gouwu-z">
<div class="gouwu-top">
<ul>
<li class="l01"><input type="checkbox" id="chec1"></li>
<li class="l02">全选</li>
<li class="l03">店铺宝贝</li>
<li class="l04">获积分</li>
<li class="l05">单价（元）</li>
<li class="l06">数量</li>
<li class="l07">小计（元）</li>
<li class="l08">操作</li>
</ul>
</div>
<div class="gouwu-zhong">
<div class="gouwu-z01"id="gouwu-z01">
<ul>
<li class="dian">店铺：</li>
<li class="qiao"><a href="">纤巧百媚时尚鞋坊</a></li>
<li>卖家：</li>
<li><a href="">纤巧百媚</a></li>
<li class="img"><img src="images/taobao_relation.jpg" alt=""></li>
</ul>
<div class="xian">
<div class="xian01 zuof">
<input type="checkbox"id="chec2">
</div>
<div class="xian02 zuof">
<div class="xian02-1 zuof">
<img src="images/taobao_cart_01.jpg" alt="">
</div>
<div class="xian02-2 zuof">
<a href="">日韩流行风尚美眉最爱独特米色拼图金属坡跟公主靴子黑色</a>
<p>颜色：棕色 尺码：37</p>
<p>
保障：<img src="images/taobao_icon_01.jpg" alt="">
</p>
</div>
</div>
<div class="xian03 zuof">
5
</div>
<div class="xian04 zuof">
138.00
</div>
<div class="xian05 zuof">
<input class="xian05-1" type="button" value="-">
<input class="xian05-2" type="text" value="1">
<input class="xian05-3" type="button" value="+">
</div>
<div class="xian06 zuof">
138
</div>
<div class="xian07 zuof">
<a href="javascript:void(0);" id="shanChu0">删除</a>
</div>
</div>
</div>
<div class="gouwu-z02"id="gouwu-z02">
<ul>
<li class="dian">店铺：</li>
<li class="qiao"><a href="">香港我的美丽日记</a></li>
<li>卖家：</li>
<li><a href="">lokemick2009</a></li>
<li class="img"><img src="images/taobao_relation.jpg" alt=""></li>
</ul>
<div class="xian">
<div class="xian01 zuof">
<input type="checkbox"id="chec3">
</div>
<div class="xian02 zuof">
<div class="xian02-1 zuof">
<img src="images/taobao_cart_02.jpg" alt="">
</div>
<div class="xian02-2 zuof">
<a href="">chanel/香奈儿/香奈儿炫亮魅力唇膏3.5g</a>
<p>
保障：<img src="images/taobao_icon_01.jpg" alt="">
<img src="images/taobao_icon_02.jpg" alt="">
</p>
</div>
</div>
<div class="xian03 zuof">
12
</div>
<div class="xian04 zuof">
265.00
</div>
<div class="xian05 zuof">
<input class="xian05-1" type="button" value="-">
<input class="xian05-2" type="text" value="1">
<input class="xian05-3" type="button" value="+">
</div>
<div class="xian06 zuof">
265
</div>
<div class="xian07 zuof">
<a href="javascript:void(0);"id="shanChu1">删除</a>
</div>
</div>
</div>
<div class="gouwu-z03"id="gouwu-z03">
<ul>
<li class="dian">店铺：</li>
<li class="qiao"><a href="">实体经营</a></li>
<li>卖家：</li>
<li><a href="">林颜店铺</a></li>
<li class="img"><img src="images/taobao_relation.jpg" alt=""></li>
</ul>
<div class="xian">
<div class="xian01 zuof">
<input type="checkbox"id="chec4">
</div>
<div class="xian02 zuof">
<div class="xian02-1 zuof">
<img src="images/taobao_cart_03.jpg" alt="">
</div>
<div class="xian02-2 zuof">
<a href="">蝶妆海昔蓝清莹粉底液10#（象牙白）</a>
<p>
保障：<img src="images/taobao_icon_01.jpg" alt="">
<img src="images/taobao_icon_02.jpg" alt="">
</p>
</div>
</div>
<div class="xian03 zuof">
3
</div>
<div class="xian04 zuof">
85.00
</div>
<div class="xian05 zuof">
<input class="xian05-1" type="button" value="-">
<input class="xian05-2" type="text" value="1">
<input class="xian05-3" type="button" value="+">
</div>
<div class="xian06 zuof">
85
</div>
<div class="xian07 zuof">
<a href="javascript:void(0);" id="shanChu2">删除</a>
</div>
</div>
</div>
<div class="gouwu-z04"id="gouwu-z04">
<ul>
<li class="dian">店铺：</li>
<li class="qiao"><a href="">红豆豆的小屋</a></li>
<li>卖家：</li>
<li><a href="">taobao豆豆</a></li>
<li class="img"><img src="images/taobao_relation.jpg" alt=""></li>
</ul>
<div class="xian">
<div class="xian01 zuof">
<input type="checkbox"id="chec5">
</div>
<div class="xian02 zuof">
<div class="xian02-1 zuof">
<img src="images/taobao_cart_04.jpg" alt="">
</div>
<div class="xian02-2 zuof">
<a href="">相宜促销专供 大S推荐 最好用的LilyByll化妆棉</a>
<p>
保障：<img src="images/taobao_icon_01.jpg" alt="">
</p>
</div>
</div>
<div class="xian03 zuof">
12
</div>
<div class="xian04 zuof">
12.00
</div>
<div class="xian05 zuof">
<input class="xian05-1" type="button" value="-">
<input class="xian05-2" type="text" value="2">
<input class="xian05-3" type="button" value="+">
</div>
<div class="xian06 zuof">
24
</div>
<div class="xian07 zuof">
<a href="javascript:void(0);" id="shanChu3">删除</a>
</div>
</div>
</div>
</div>
<div class="gouwu-bot">
<div class="gouwu-bot01">
<input type="button" value="删除所选" id="shanChu">
</div>
<div class="gouwu-bot02">
<ul>
<li>商品总价（不含运费）：<a href=""id="zongJia">0</a> 元</li>
<li>可获积分：<a href=""id="zongJiFen">0</a> 点</li>
<li><input type="button" value="立即购买"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>