<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购物车功能的具体实现</title>
<link rel="stylesheet" type="text/css" href="../css/shopping.css"/>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
<!--使用JS别忘记将其引入-->
<script src="../js/shopping.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--导航开始-->
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href=""><i class="iconfont"></i></a></li>
<!--请链接到首页-->
<li><a href="">小米首页</a></li>
<li><a href="">配送到：达州</a></li>
</ul>
<ul class="nav_ul2">
<li><a href=""></a><span>|</span></li>
<!--请链接到首页-->
<li><a href="">小米商城</a><span>|</span></li>
<li><a href="">MIUI</a><span>|</span></li>
<li><a href="">LOT</a><span>|</span></li>
<li><a href="">云服务</a><span>|</span></li>
<li><a href="">金融</a><span>|</span></li>
<li><a href="">有品</a></li>
<li><a href="">企业团购</a></li>
<li><a href="">下载app</a><span>|</span></li>
<li><a href="">协议规则</a><span>|</span></li>
</ul>
</div>
</div>
<!--导航结束-->
<!--搜索框开始-->
<div class="search">
<div class="warp">
<img src="../img/logo_top.png" />
<div class="search_div">
<input type="text" class="search_text">
<input type="button" value="搜索" class="search_but"/>
</div>
</div>
</div>
<!--搜索框结束-->
<!--标题开始 -->
<div class="title warp">
<h3>全部商品</h3>
<div >
<span id="">配送至</span>
<select >
<option >通川区</option>
<option >渠县</option>
<option >宣汉县</option>
<option >大竹县</option>
</select>
</div>
</div>
<!--标题结束-->
<!--显示菜单的开始 -->
<!--warp令内容居中显示-->
<div class="tips warp">
<ui>
<li>
<input type="checkbox" name="fav" id="all" οnclick="checkTest1(this),checkTest2()"/>全选</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ui>
</div>
<!--显示菜单的结束-->
<!--商品详情展示开始-->
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" οnclick="checkTest2()" /> </li>
<li class="info_2"> <img src="../img/phone.jpg" width="80px"/> </li>
<li class="info_3"><a>小米10青春版 6GB+128GB 蓝莓薄荷</a></li>
<li class="info_4"><a>颜色：灰色+粉红</a> </li>
<li class="info_5">1882.5</li>
<li class="info_6">
<button οnclick="checkTest3(this,1),checkTest2()" >-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" οnclick="checkTest3(this,2),checkTest2()" >+</button>
</li>
<li class="info_7">￥1882.5</li>
<li>
<!--通过href触发后面的JS代码，通过点击自身-->
<a href="javascript:void(0)" οnclick="checkTest4(this),checkTest2()" >删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" οnclick="checkTest2()" /> </li>
<li class="info_2"> <img src="../img/img2.jpg" width="80px"/> </li>
<li class="info_3"><a>ProArt G15 星空灰 9代i7 15.6英寸 RTX 2060 设计师笔记本电脑</a></li>
<li class="info_4"><a>颜色：白色/黑色</a> </li>
<li class="info_5">13800</li>
<li class="info_6">
<button οnclick="checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" οnclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥13800</li>
<li>
<!--删除完毕，再进行一次判断-->
<a href="javascript:void(0)" οnclick="checkTest4(this),checkTest2()" >删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" οnclick="checkTest2()" /> </li>
<li class="info_2"> <img src="../img/data-line.jpg" width="80px"/> </li>
<li class="info_3"><a>小米超长数据线</a></li>
<li class="info_4"><a>颜色：白色</a> </li>
<li class="info_5">50</li>
<li class="info_6">
<button οnclick="checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" οnclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥50</li>
<li>
<a href="javascript:void(0)" οnclick="checkTest4(this),checkTest2()" >删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<!--商品详情展示结束-->
<!--结算窗口开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li><input type="checkbox" name="fav" οnclick="checkTest1(this),checkTest2()" />全选</li>
<li>删除选中商品</li>
<li>移到我的关注</li>
<li>清除下柜商品</li>
</ul>
<ul class="balance_ul2">
<li>已经选择<span id="snum">0</span>件商品</li>
<li>总价<span id="zongz">￥0</span></li>
<li class="butt">去结算</li>
</ul>
</div>
<!--结算窗口结束-->
<div class="footer">
<iframe src="footer.html" frameborder="0" id="footer"></iframe>
</div>
</body>
</html>
``shopping.js
```css
//获得所有多选框的对象
var fav=document.getElementsByName("fav");
//判断是否是全选操作
function checkTest1(th){
//判断选项是否被勾选
var flag=th.checked;
//alert(flag);
//通过forech的方法遍历名为fav的有序列表
for (var i in fav) {
fav[i].checked=flag;
}
}
//单选决定全选操作
function checkTest2(){
var flag=true;
/*遍历出去第一个和最后一个fav，后来再处理*/
for (var i=1;i<fav.length-1;i++) {
if (!fav[i].checked) {
flag=false;
break;
}
}
/*决定是否被勾选，fav[0]代表第一个全选框，fav[1]代表第二个多选框*/
fav[0].checked=flag;
fav[fav.length-1].checked=flag;
//alert(flag);
//商品的总价格
var zong=0;
//统计被勾选对象的数量
var num=0;
//统计商品数量
var spNum=0;
//价格是否统计,遍历第2、3、4个fav
for (var i=1;i<fav.length-1;i++) {
//如果被勾选
if (fav[i].checked) {
num++;
//获得ul父节点
var par =fav[i].parentNode.parentNode;
//获得指定ul下的所有li
var li= par.getElementsByTagName("li");
//单个商品的总价格:将得到的数据通过￥分开，并取第二个元素
var z=li[6].innerText.split("￥")[1];
//获得所有商品的总结格
zong+=Number(z);
document.getElementById("zongz").innerText=zong;
//获得商品的数量
var z2=li[5].getElementsByTagName("input");
var num2=z2[0].value;
spNum+=Number(num2);
//获得商品数量统计对象
document.getElementById("snum").innerText=spNum;
}
}
if(num==0){
document.getElementById("zongz").innerText=0;
document.getElementById("snum").innerText=0;
}
}
/*控制数量的增加或减少，注意括号问题*/
function checkTest3(th,sig){
//就是th，即this传的值
var pre;
if (sig=="1") {
//获得下一个节点对象
pre=th.nextElementSibling;
if (Number(pre.value)>0) {
//获得节点的value的值
pre.value=Number(pre.value)-1;
}
}else{
//获得上个节点的对象
pre=th.previousElementSibling;
//获得下一个节点对象
pre.value=Number(pre.value)+1;
}
//计算每个商品的价格
//获取当前节点的父节点的上一个节点的内容，即每个商品的单价nnerText\innerHTML都可以
var val=pre.parentNode.previousElementSibling.innerText;
//计算总价格
var zong=Number(val)*Number(pre.value);
//把总价赋值给指定对象
pre.parentNode.nextElementSibling.innerText="￥"+zong;
}
//删除指定节点
function checkTest4(th){
//获得父节点div(<a>的父节点（li）的父节点（ul）的父节点div)
var div=th.parentNode.parentNode.parentNode;
div.remove();
}
通过判断语句和遍历语句分别来对应相应的功能，再通过JS控制相应的事件
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
