<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin:0px; padding:0px;} body{text-align: center; font-size:14px;} a{text-decoration:none;} li{list-style:none;} .nav{ height: 30px; background-color: #f1f1f1; } .wrap{ width: 1000px; margin:0px auto; } .nav_ul1, .nav_ul2 li{ float: left; } .nav_ul1 li{ float: left; line-height:30px; margin-right: 20px; } .nav_ul1 a, .nav_ul2 a, .nav_ul2 span{ font-size: 12px; color: gray; } .nav_ul2{ float: right; } .nav_ul2 li,.nav_ul2 span{ line-height: 30px; margin-left: 10px; } .nav a:hover{ color: red; } /*搜索开始*/ .search{ margin-top: 20px; } .search img{ /*clear: both = 清除之前样式*/ clear: both; float: left; } .search_div{ float: right; margin-top: 25px; margin-right: 315px; } .search_text{ width: 265px; height: 21px; border: 3px solid #c91623; position: relative; left: 4px; top:-1px } .search_button{ width: 51px; height: 29px; background-color: #c91623; border: 0px; color: #ffffff; } /*搜索结束*/ /*标题开始*/ .title{ margin-top: 180px; } .title h3{ float:left; font-size: 23px; color: #C91623; } .title div{ float: right; font-size: 14px; color: gray; } /*标题结束*/ /*显示菜单开始*/ .tips{ width: 1000px; height: 50px; background-color: #f1f1f1; margin-top: 210px; border: 1px solid #e9e9e9; } .tips li{ float: left; line-height: 50px; font-size: 12px; color: gray; } .tips li:nth-child(1){width: 90px;border-top:3px solid #C91623;} .tips li:nth-child(2){margin-left:80px;} .tips li:nth-child(3){margin-left:430px;} .tips li:nth-child(4){margin-left:70px;} .tips li:nth-child(5){margin-left:110px;} .tips li:nth-child(6){margin-left:50px;} /*显示菜单结束*/ /*商品详情开始*/ .info{ width: 1000px; height: 125px; background-color:#fff4e8; border:1px solid gray; margin-top: 30px; border-top: 3px solid gray; } .info li{ float: left; margin-top: 20px; } .info a{ font-size:12px; color: #333333; } .info_1{ margin-left: 23px; } .info_2{ margin-left: 15px; border: 1px solid gray; } .info_3{ width: 250px; height: 20px; } .info_4{ margin-left: 20px; font-size:12px } .info_5{ margin-left: 120px; } .info_6{ margin-left: 40px } .info_6 input{ width:30px; height:12px; position: relative; text-align: center; top:-2px; left:-5px; } .info_6 button{ width: 45px; height: 18px; position: relative; left:-3px; } .bot{ position: relative; left:-10px; } .input_7 { margin-left: 50px; } /*商品详情结束*/ /*结算开始*/ .balance{ width: 1000px; height: 50px; border: 1px solid gray; margin-top: 30px; } .balance_ul1, .balance_ul1>li,.balance_ul2>li{ float: left; line-height: 50px; margin-left: 14px; } .balance_ul2{ float: right; } .butt{ width: 100px; height: 50px; background-color: #C91623; border:0px; color: #FFFFFF; font-size: 20px; font-weight: bold; } .balance span{ font-size: 25px; color: #C91623; font-weight: bold; } /*结算结束*/ </style> <script> //判断是否全选// var fav=document.getElementsByName("fav"); function checkTest1(th){ var flag=th.checked; if(flag){ for(var i in fav){ fav[i].checked=true; } }else{ for(var i in fav){ fav[i].checked=false; } } } //单选决定全选操作// function checkTest2(){ var flag=true; for(var i=1; i<fav.length-1; i++){ if(!fav[i].checked){ flag=false; break; } } //决定框是否勾选// fav[0].checked=flag; fav[fav.length-1].checked=flag; //价格是否统计// var zong =0; var num=0; var spNum=0; for(var i=1; i<fav.length-1; i++){ if(fav[i].checked){ num++; var par=fav[i].parentNode.parentNode; var li=par.getElementsByTagName("li"); //单个商品总价格// var 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; } } //控制数量+-// function checkTest3(th,sig){ var pre; if(sig=="1"){ pre=th.nextElementSibling; if(Number(pre.value)>0){ pre.value=Number(pre.value)-1; } }else{pre=th.previousElementSibling; pre.value=Number(pre.value)+1; } //计算每一个商品总价格// var val=pre.parentNode.previousElementSibling.innerHTML; //计算总价格// var zong=Number(val)*Number(pre.value); //把总的价格赋值给指定对象// pre.parentNode.nextElementSibling.innerHTML="¥"+zong; } //删除指定节点// function checkTest4(th){ var div=th.parentNode.parentNode.parentNode; div.remove() } </script> </head> <body> <!--导航开始--> <div class="nav"> <div class="wrap"> <ul class="nav_ul1"> <!--@=icon标签码--> <li><a href=""><i class="iconfont">@</i>京东首页</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="">我的京东</a><span>|</span></li> <li><a href="">京东会员</a><span>|</span></li> <li><a href="">企业采购</a><span>|</span></li> <li><a href="">京东手机</a><span>|</span></li> <li><a href="">关注京东</a><span>|</span></li> <li><a href="">客户服务</a><span>|</span></li> <li><a href="">网站导航</a><span>|</span></li> </ul> </div> </div> <!--导航结束--> <!--搜索开始--> <div class="search"> <div class="wrap"> <img src="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/header/sprite.png"> </div> <div class="search_div"> <input class="search_text" type="text"> <input class="search_button" type="button" value="搜索"> </div> </div> <!--搜索开始--> <!--标题开始--> <div class="title wrap"> <h3>全部商品</h3> <div> <span>配送到</span> <select name="" id=""> <option value="">昌平区</option> <option value="">顺义区</option> <option value="">大兴区</option> <option value="">朝阳区</option> <option value="">昌平区</option> </select> </div> </div> <!--标题结束--> <!--显示菜单开始--> <div class="tips wrap"> <ul> <li> <input type="checkbox" id="all" name="fav" onclick="checkTest1(this), checkTest2()" />全选 </li> <li>商品</li> <li>单价</li> <li>数量</li> <li>小计</li> <li>操作</li> </ul> </div> <!--显示菜单结束--> <!--商品详情开始--> <div class="info wrap"> <ul> <li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li> <li class="info_2"><img src="https://img0.baidu.com/it/u=1045489836,2502408267&fm=26&fmt=auto" width="65px"></li> <li class="info_3"><a href="">desha春季衣服</a></li> <li class="info_4">颜色: 灰色+粉红</li> <li class="info_5">182.5</li> <li class="info_6"> <button onclick="checkTest3(this,1),checkTest2()">-</button> <input type="text" value="1"> <button onclick="checkTest3(this,2),checkTest2()">+</button> </li> <li class="info_7">¥182.5</li> <li class="info_8"> <a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">删除</a><br /> <a href="">移到我的关注</a> </li> </ul> </div> <!--商品详情结束--> <!--结算开始--> <div class="balance wrap"> <ul class="balance_ul1"> <li> <input type="checkbox" name="fav" onclick="checkTest1(this),checkTest2()" />全选 </li> <li><a href="">删除选中商品</a></li> <li><a href="">移到我的关注</a></li> <li><a href="">清除下柜物品</a></li> </ul> <ul class="balance_ul2"> <li>以选择<span id="snum">0</span>件商品</li> <li>总价 <span id="zongz">¥0</span></li> <li><button class="butt">去结算</button></li> </ul> </div> <!--结算结束--> </body></html>啦老师,不知道为什么一开始本来好好的,但是加入如下图那一块之后,JS 的功能就没法运行了。