5-2的作业。
来源：5-2 作业题
艾华生
2018-09-09 15:35:40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="cont">
<nav>
<img class="logo" src="img/1536299641(1).jpg" alt="" />
<ul>
<li><a href=""#>课程</a></li>
<li><a href=""#>职业路径</a></li>
<li><a href=""#>实战</a></li>
<li><a href=""#>猿问</a></li>
<li><a href=""#>手记</a></li>
</ul>
<div class="seach">
<input class="seachBox" type="text" placeholder=" seach">
<a href="#"><img class="icon1" src="img/1536299592(1).jpg" alt="" /></a>
</div>
<div class="headerIcon">
<a href="#"><img class="icon2" src="img/1536299548(1).jpg" alt="" /></a>
<a href="#"><img class="icon2" src="img/1536299617(1).jpg" alt="" /></a>
<a href="#"><img class="headPortrait" src="img/1536299703(1).jpg" alt="" /></a>
</div>
</nav>
</header>
<section>
<div class="banner">
<h2>我的购物车</h2>
</div>
<div class="shoppingCart">
<div class="title">
<label><input class="allselect" id="allselect" type="checkbox"
style="cursor:pointer" checked="checked">全选</input><label>
<span class="title1">商品名称</span>
<div class="title2">
<span>总价</span>
<span>单价</span>
<span>数量</span>
</div>
<span class="title3">操作</span>
</div>
<div class="lis">
<ul>
<li class="lis1">
<input class="select" type="checkbox" style="cursor:pointer" checked="checked">
<img src="img/1536313756(1).jpg" alt="" />
<span class="name">前端小白成长记</span>
<div class="price">
<p>￥<span class="totalPrice">396</span></p>
<p>￥ <span class="unitPrice">396</span></p>
<input class="sub" type="button" value="-">
<input class="num" type="text" value="1">
<input class="add" type="button" value="+">
</div>
<span class="remove">删除</span>
</li>
<li class="lis1">
<input class="select" type="checkbox" style="cursor:pointer" checked="checked">
<img src="img/1536313756(1).jpg" alt="" />
<span class="name">前端小白成长记</span>
<div class="price">
<p>￥<span class="totalPrice">396</span></p>
<p>￥ <span class="unitPrice">396</span></p>
<input class="sub" type="button" value="-">
<input class="num" type="text" value="1">
<input class="add" type="button" value="+">
</div>
<span class="remove">删除</span>
</li>
<li class="lis1">
<input class="select" type="checkbox" style="cursor:pointer" checked="checked">
<img src="img/1536313756(1).jpg" alt="" />
<span class="name">前端小白成长记</span>
<div class="price">
<p>￥<span class="totalPrice">396</span></p>
<p>￥ <span class="unitPrice">396</span></p>
<input class="sub" type="button" value="-">
<input class="num" type="text" value="1">
<input class="add" type="button" value="+">
</div>
<span class="remove">删除</span>
</li>
<li class="lis1">
<input class="select" type="checkbox" style="cursor:pointer" checked="checked">
<img src="img/1536313756(1).jpg" alt="" />
<span class="name">前端小白成长记</span>
<div class="price">
<p>￥<span class="totalPrice">396</span></p>
<p>￥ <span class="unitPrice">396</span></p>
<input class="sub" type="button" value="-">
<input class="num" type="text" value="1">
<input class="add" type="button" value="+">
</div>
<span class="remove">删除</span>
</li>
</ul>
</div>
</div>
<div class="sum">
<p>
应付金额:
￥<span class="total"style="color:red">0</span>
</p>
<input type="submit" value="ok">
</div>
</section>
<footer>
<div class="footerBox">
<ul>
<li><a href="#">网站首页</li></a>
<li><a href="#">企业合作</li></a>
<li><a href="#">人才招聘</li></a>
<li><a href="#">联系我们</li></a>
<li><a href="#">讲师招募</li></a>
<li><a href="#">常见问题</li></a>
<li><a href="#">意见反馈</li></a>
<li><a href="#">慕课大学</li></a>
<li><a href="#">友情链接</li></a>
</ul>
<p>Copyright © 2017 imooc.com All Rights Reserved |京ICP备 13046642号-2</p>
<div class="icon">
<a href="#"><img src="img/1536299744(1).jpg" alt="" /></a>
<a href="#"><img src="img/1536299768(1).jpg" alt="" /></a>
<a href="#"><img src="img/1536299791(1).jpg" alt="" /></a>
</div>
</div>
</footer>
<script type="text/javascript" src="js/script.js">
</script>
</body>
</html>
/*通用样式*/
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;color: #fff;}
span{font-size: 20px;}
/*header样式*/
.cont{width: 100%;height: 55px;background: #010101;position: relative;
line-height: 55px;}
.cont .logo{position: absolute;left:30px;}
.cont ul{position: absolute;left:200px;top: 0}
.cont ul li{float: left;margin-left: 60px;color: #fff;}
.cont .seach{}
.cont .headerIcon{width: 250px;height:40px;
position: absolute;
overflow:hidden;
top:0;bottom:0;right:0;margin: auto;
}
.cont .headerIcon .icon2{float: left;margin-right: 30px;margin-top: 5px;}
.cont .seach{position: absolute;top:0;right:300px;}
.cont .seachBox{width: 200px;height: 40px;border:none;
background-color: rgba(255,255,255,0.8)}
.cont .seach .icon1{margin-left: 5px;}
/*banner样式*/
.banner{width: 100%;height: 120px;background: #d1c4c4;position: relative;}
.banner h2{width: 60%;height: 40px;position: absolute;
top:60px;left: 0;right: 0;margin:auto;}
/*购物清单样式*/
.shoppingCart{width: 70%;height: auto;
left: 0;right: 0;margin:auto;box-shadow: 0 0 10px 3px #ded1d1;}
.title{width: auto;height: 50px;line-height: 50px;
position: relative;background-color: #ebebeb;}
.title .allselect{width: 15px;height: 15px;margin-left: 20px;margin-right:10px;}
.title .title1{margin-left: 40px;}
.title .title2{display: inline;position: absolute;right: 300px;}
.title .title2 span{margin-left: 100px;}
.title .title3{position: absolute;right: 50px;}
.lis .lis1{width: auto;height: 120px;position: relative;
border-bottom: 1px solid #ded1d1;}
.lis .lis1 input:first-of-type{width: 15px;height: 15px;margin-left: 20px;
position: absolute;top:50%;}
.lis .lis1 img{width: 150px;position: absolute;top:0;bottom: 0;
margin: auto;left:60px;}
.lis .lis1 .name{font-size: 22px;width: 230px;height: auto;
position: absolute;top: 20px;left:220px;}
.lis .lis1 .price{width: 440px;height: 30px;position: absolute;
top:40px;right: 250px;}
.lis .lis1 .price p{display: inline;margin-left: 40px;margin-right: 50px}
.lis .lis1 .price input:nth-of-type(1){width: 20px;height: 20px;
position: absolute;
top:5px;}
.lis .lis1 .price input:nth-of-type(2){width: 70px;height: 20px;margin: 0 5px;
position: absolute;top:0;bottom: 0;
margin: auto;right:25px;}
.lis .lis1 .price input:nth-of-type(3){width: 20px;height: 20px;
position: absolute;right:0;
top:5px;}
.lis .remove{font-size: 18px;position: absolute;right: 53px;top:40px;
cursor: pointer;}
.sum{width:70%;height:50px;left: 0;right: 0;margin:auto;
margin-top: 30px;margin-bottom: 50px;
border: 1px solid #ded1d1;
position: relative;}
.sum input{width: 100px;height: 50px;float: right;}
.sum p{display: inline;width:auto;height: 50px;float:right;line-height: 50px;
position: absolute;right: 100px;}
/*footer样式*/
footer{width:100%;height: 80px;line-height: 60px;background:#010101;}
.footerBox{width: 70%;height: 80px;left: 0;right: 0;margin:auto;
position: relative;}
.footerBox ul li{font-size: 12px;float: left;color:#fff;margin-right: 20px;}
.footerBox p{display: block;width: 600px;height: 30px;
color:#aaa;position: absolute;top:30px;
font-size: 12px;}
.footerBox .icon{position: absolute;right:0;top: 20px;}
.footerBox .icon img{margin-left: 10px;}
// 封装获取id方法
function byid(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
function byclassname(classname){
return typeof(classname)==="string"?document.getElementsByClassName(classname):classname;
}
// 获取id，class
var allselect=byid("allselect"),//获取全选复选框
select=byclassname("select"),//获取其余复选框
totalPrice=byclassname("totalPrice"),//获取单个商品总价
unitPrice=byclassname("unitPrice"),//获取单个商品单价
sub=byclassname("sub"),//获取减号
num=byclassname("num"),//获取数量
add=byclassname("add"),//获取加号
remove=byclassname("remove"),//获取所有删除键
total=byclassname("total");//获取合计价格
console.log(num[0].value);
// 当全选框被选择时；
allselect.onclick=function(){
for(var i=0;i<select.length;i++){
if(allselect.checked){
select[i].checked=true;
}else{
select[i].checked=false;
}
}
};
// 当任意一个复选框被选择时；
for(var i=0;i<select.length;i++){
select[i].onclick=function(){
if(!this.checked){
allselect.checked=false;
}
}
};//************************如何实现当4个复选框全部选中后“全选”也勾上？
//计算价格函数
function count(){
for (var i = 0; i < remove.length; i++) {
totalPrice[i].innerHTML=praseInt(unitPrice[i].innerHTML)*num[i].value;
}
}
// 加号 “+”
for(var i=0;i<remove.length;i++){
add[i].onclick=function(){
num[i].value=parseInt(num[i].value)+1;
}
}//加号操作也没有实现
当其中一个复选框处于未选择时，全选框不勾选。这该怎么实现？代码很纠结。
加号的操作，控制台一直在报错，真是头疼啊...............
1回答
-
樱桃小胖子
2018-09-10
<div class="catbox"> <table id="cartTable" frame="hsides"> <thead> <tr> <th> <label> <input class="check-all check" type="checkbox"/> 全选 </label> </th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td class="checkbox"><input class="check-one check" type="checkbox"/></td> <td class="goods"><img src="images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td> <td class="price">5999.88</td> <td class="count"> <span class="reduce">-</span> <input class="count-input" type="text" value="1"/> <span class="add">+</span></td> <td class="subtotal">5999.88</td> <td class="operation"><span class="delete">删除</span></td> </tr> <tr> <td class="checkbox"><input class="check-one check" type="checkbox"/></td> <td class="goods"><img src="images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td> <td class="price">3888.50</td> <td class="count"> <span class="reduce">-</span> <input class="count-input" type="text" value="1"/> <span class="add">+</span></td> <td class="subtotal">3888.50</td> <td class="operation"><span class="delete">删除</span></td> </tr> <tr> <td class="checkbox"><input class="check-one check" type="checkbox"/></td> <td class="goods"><img src="images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td> <td class="price">1428.50</td> <td class="count"> <span class="reduce">-</span> <input class="count-input" type="text" value="1"/> <span class="add">+</span></td> <td class="subtotal">1428.50</td> <td class="operation"><span class="delete">删除</span></td> </tr> <tr> <td class="checkbox"><input class="check-one check" type="checkbox"/></td> <td class="goods"><img src="images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td> <td class="price">640.60</td> <td class="count"> <span class="reduce">-</span> <input class="count-input" type="text" value="1"/> <span class="add">+</span></td> <td class="subtotal">640.60</td> <td class="operation"><span class="delete">删除</span></td> </tr> </tbody> </table> <div class="foot" id="foot"> <label class="select-all"> <div class="closing fr">结 算</div> <div class="total fr">总付账金额：￥<span id="priceTotal">0.00</span></div> </label> </div>
window.onload = function () { var table = document.getElementById('cartTable'); // 购物车表格 var selectInputs = document.getElementsByClassName('check'); // 所有勾选框 var checkAllInputs = document.getElementsByClassName('check-all') // 全选框 var tr = table.children[1].rows; //行 var priceTotal = document.getElementById('priceTotal'); //总计 var deleteAll = document.getElementById('deleteAll'); // 删除全部按钮 var selected = document.getElementById('selected'); //已选商品 var foot = document.getElementById('foot'); // 更新总数和总价格 function getTotal() { var seleted = 0; var price = 0; var HTMLstr = ''; for (var i = 0, len = tr.length; i < len; i++) { if (tr[i].getElementsByTagName('input')[0].checked) { tr[i].className = 'on'; seleted += parseInt(tr[i].getElementsByTagName('input')[1].value); price += parseFloat(tr[i].cells[4].innerHTML); HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消选择</span></div>' } else { tr[i].className = ''; } } priceTotal.innerHTML = price.toFixed(2); if (seleted == 0) { foot.className = 'foot'; } } // 计算单行价格 function getSubtotal(tr) { var cells = tr.cells; var price = cells[2]; //单价 var subtotal = cells[4]; //小计td var countInput = tr.getElementsByTagName('input')[1]; //数目input var span = tr.getElementsByTagName('span')[1]; //-号 //写入HTML subtotal.innerHTML = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2); } // 点击选择框 for(var i = 0; i < selectInputs.length; i++ ){ selectInputs[i].onclick = function () { if (this.className.indexOf('check-all') >= 0) { //如果是全选，则吧所有的选择框选中 for (var j = 0; j < selectInputs.length; j++) { selectInputs[j].checked = this.checked; } } if (!this.checked) { //只要有一个未勾选，则取消全选框的选中状态 for (var i = 0; i < checkAllInputs.length; i++) { checkAllInputs[i].checked = false; } } getTotal();//选完更新总计 } } //为每行元素添加事件 for (var i = 0; i < tr.length; i++) { //将点击事件绑定到tr元素 tr[i].onclick = function (e) { var e = e || window.event; var el = e.target || e.srcElement; //通过事件对象的target属性获取触发元素 var cls = el.className; //触发元素的class var countInout = this.getElementsByTagName('input')[1]; // 数目input var value = parseInt(countInout.value); //数目 //通过判断触发元素的class确定用户点击了哪个元素 switch (cls) { case 'add': //点击了加号 countInout.value = value + 1; getSubtotal(this); break; case 'reduce': //点击了减号 if (value > 1) { countInout.value = value - 1; getSubtotal(this); } break; case 'delete': //点击了删除 var conf = confirm('确定删除此商品吗？'); if (conf) { this.parentNode.removeChild(this); } break; } getTotal(); } // 给数目输入框绑定keyup事件 tr[i].getElementsByTagName('input')[1].onkeyup = function () { var val = parseInt(this.value); if (isNaN(val) || val <= 0) { val = 1; } if (this.value != val) { this.value = val; } getTotal(); //更新总数 } } // 默认全选 checkAllInputs[0].checked = true; checkAllInputs[0].onclick(); }希望可以帮到你！
0
相似问题