网页组件制作之购物车效果
在该笔记中将学到列表展示中购物车效果的方法与展示效果
本系列的是参考慕课网 阿安老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。
实现效果
注意事项：
在进行 float 计算结果输出的时候，因为 float 的精度很高，所以输出的结果会有很高的精度，如 “73.23” 会输出成 “73.2300000000001”。所以，在使用 innerText 修改计算结果的时候，可以使用 toFixed(num) 对float 数值进行处理，修改显示精度。
<html>
<head>
<title>购物车</title>
<meta charset="utf-8">
<style type="text/css">
body{margin: 0;padding: 0;font-size: 12px;}
.wrap{width: 700px;margin: 20px auto;}
.wrap span{display: inline-block;}
#shop-head{border: 1px solid #ddd;border-top: 2px solid rgb(178, 200, 231);height: 20px;background-color: rgb(228, 241, 255)}
#shop-head span{text-align: center;height: 20px;line-height: 20px}
.select,.price,.number,.total,.action{width: 80px}
.good{width: 200px;}
.goods{height: 100px;background-color: rgb(239, 245, 255);border: 1px solid #ddd;}
.good img{display: inline-block;vertical-align: middle}
.goods input{display: inline-block;vertical-align: middle;width: 30px;text-align: center}
.goods .number .add{background-color: #ddd;;width: 16px;height: 20px;line-height: 20px;margin-left: -6px;cursor: pointer;}
.goods .number .reduce{background-color: #ddd;;width: 16px;height: 20px;line-height: 20px;margin-right: -6px;}
.goods span:not([class=good]){line-height: 100px;vertical-align: middle;text-align: center}
.goods .action .delete{cursor: pointer;height: 20px;line-height: 20px;}
#shop-footer{background-color: rgb(237, 236, 237);border: 1px solid #ddd;margin-top: 2px;height: 30px;line-height: 30px;}
#shop-footer .buy{float: right;width: 60px;height: 30px;border-left: 1px solid #ddd;display: inline-block;text-align: center;}
#shop-footer .sum{margin-left: 300px;}
</style>
<script>
let data = [
{img:"http://ofjjubwp5.bkt.clouddn.com/image/jpg/img77.jpg",name:"图解TCP/IP",price:46.20},
{img:"http://ofjjubwp5.bkt.clouddn.com/image/jpg/img78.jpg",name:"图解HTTP",price:28.80},
{img:"http://ofjjubwp5.bkt.clouddn.com/image/jpg/img79.jpg",name:"ES6标准入门",price:41.30}
];
function calTotal() {
let goods = document.getElementsByClassName("goods");
let total = 0;
for(let i = 0; i < goods.length; i++) {
if(goods[i].getElementsByClassName("select")[0].getElementsByTagName("input")[0].checked) {
let num = parseInt(goods[i].getElementsByClassName("count")[0].value);
let price = parseFloat(goods[i].getElementsByClassName("price")[0].innerText);
total = total + num * price;
}
}
for(let i = 0; i < goods.length; i++) {
let num = parseInt(goods[i].getElementsByClassName("count")[0].value);
let price = parseFloat(goods[i].getElementsByClassName("price")[0].innerText);
let prices = num * price;
goods[i].getElementsByClassName("total")[0].innerText = prices.toFixed(2);
}
document.getElementById("totalprice").innerText = total.toFixed(2);
}
window.onload =function () {
let shopContent = document.getElementById("shop-content");
let goodsHTML = shopContent.innerHTML;
let number = document.getElementById("shop-content").getElementsByClassName("number");
let selectgoods = document.getElementById("shop-content").getElementsByClassName("select");
//预处理内容
let newHTMLCont = [];
for(let i=0; i<data.length;i++) {
let newHTML = goodsHTML.replace("{{img}}", data[i].img).replace(/{{index}}/g, i).replace("{{name}}", data[i].name).replace("{{price}}", data[i].price);
newHTMLCont.push(newHTML);
}
shopContent.innerHTML = newHTMLCont.join("");
//添加事件监听
for(let i=0; i<number.length; i++) {
number[i].getElementsByClassName("add")[0].onclick = function () {
let n = document.getElementById("good-" + i);
let count = n.getElementsByClassName("count")[0];
let num = parseInt(count.value)+1;
count.value = num;
if(num > 1){
let reduce = n.getElementsByClassName("reduce")[0];
reduce.style.cursor = "pointer";
reduce.innerText = "-";
}
calTotal();
}
number[i].getElementsByClassName("reduce")[0].onclick = function () {
let n = document.getElementById("good-" + i);
let count = n.getElementsByClassName("count")[0];
let num = parseInt(count.value)-1;
if(num === 1){
event.target.style.cursor = "default";
event.target.innerText = "";
}
if(num > 0){
count.value = num;
}
calTotal();
}
}
//添加选中事件监听
let selectAll = document.getElementsByClassName("select-all");
for (let i=0; i<selectAll.length;i++) {
selectAll[i].onclick = function () {
for(let j = 0; j<selectgoods.length;j++) {
selectgoods[j].getElementsByTagName("input")[0].checked = this.getElementsByTagName("input")[0].checked;
}
calTotal();
}
}
for (let i = 0; i<selectgoods.length;i++) {
selectgoods[i].onclick = calTotal;
}
//添加删除事件监听
let deletes = document.getElementsByClassName("delete");
for(let i = 0; i<deletes.length;i++) {
deletes[i].onclick = function () {
let id = this.id;
document.getElementById("shop-content").removeChild(document.getElementById("good-" + id));
calTotal();
}
}
calTotal();
}
</script>
</head>
<body>
<div class="wrap">
<div id="shop-head">
<span class="select select-all"><input type="checkbox">全选</span>
<span class="good">商品</span>
<span class="price">单价</span>
<span class="number">数量</span>
<span class="total">小计</span>
<span class="action">操作</span>
</div>
<div id="shop-content">
<div class="goods" id="good-{{index}}">
<span class="select"><input type="checkbox"></span>
<span class="good">
<img src={{img}} alt="商品图片"> {{name}}
</span>
<span class="price">{{price}}</span>
<span class="number">
<span class="reduce"></span>
<input class="count" type="text" value="1">
<span class="add">+</span>
</span>
<span class="total">46.20</span>
<span class="action">
<span class="delete" id="{{index}}">删除</span>
</span>
</div>
</div>
<div id="shop-footer">
<span class="select select-all"><input type="checkbox">全选</span>
<span class="deleteAll">删除全部</span>
<span class="sum">
已选商品<span class="counts">0</span>件
合计：￥ <span id="totalprice">46.20</span>
</span>
<span class="buy">结算</span>
</div>
</div>
</body>
</html>