编写原生css和JavaScript
商品列表
商品 1
￥30
0
+
商品 2
￥50
0
+
购物⻋
￥0
清空
结算
遇到什么问题了呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style:none;
margin:0;
padding:0;
font-size:14px;
}
.warpper {
width:400px;
background:#ccc;
}
.warpper .title {
padding:50px 0 5px 0;
text-align:center;
background:#f5bb28;
font-size:19px;
}
.list li {
display:flex;
border-bottom: 1px solid rgb(155, 155, 155);
}
.list li .box {
width:80px;
height:80px;
background:#c29422;
}
.list li .container {
padding:10px 10px;
box-sizing:border-box;
width:320px;
height:80px;
/* background:red; */
}
.list li .container .name{
font-size:20px;
}
.list li .container .price {
position:relative;
margin-top:8px;
/* background:red; */
font-size:16px;
}
.list li .container .price .btn {
width:20px;
height:20px;
background:#f5bb28;
line-height:15px;
text-align:center;
font-size:24px;
color:#fff;
position:absolute;
right:0px;
top:-5px;
cursor:pointer;
}
.list li .container .price .btn:hover {
color:rgb(233, 232, 232);
}
.list li .container .price .count {
width:15px;
height:15px;
background:#ccc;
border-radius:50%;
font-size:12px;
background:red;
color:#fff;
line-height:13px;
text-align:center;
position:absolute;
right:0px;
top:-15px;
display:none;
}
.warpper .shopping {
margin-top:150px;
background:#333;
color:rgb(182, 182, 182);
font-size:13px;
height:40px;
border-radius:20px;
line-height:40px;
}
.warpper .shopping span:nth-of-type(1) {
margin-left:3px;
padding:0px 15px;
display:inline-block;
border-right:1px solid #fff;
margin-right:10px;
color:#fff;
}
.warpper .shopping span:nth-of-type(3) {
margin-left:205px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="warpper">
<div class="title">商品列表</div>
<ul class="list">
<li>
<div class="box"></div>
<div class="container">
<div class="name">商品 1</div>
<div class="price" name="0">
￥30
<div class="btn">+</div>
<div class="count">1</div>
</div>
</div>
</li>
<li>
<div class="box"></div>
<div class="container">
<div class="name">商品 2</div>
<div class="price" name="1">
￥50
<div class="btn">+</div>
<div class="count">1</div>
</div>
</div>
</li>
<li>
<div class="box"></div>
<div class="container">
<div class="name">商品 3</div>
<div class="price" name="2">
￥40
<div class="btn">+</div>
<div class="count">1</div>
</div>
</div>
</li>
</ul>
<div class="shopping">
<span>购物车</span>
<span class="total">￥0</span>
<span class="empty">清空</span>
<span class="set">结算</span>
</div>
</div>
<script>
let list = document.getElementsByClassName('list')[0]
let eleCount = document.getElementsByClassName('count')
let totalPrice = document.getElementsByClassName('total')[0]
let empty = document.getElementsByClassName('empty')[0]
let total = 0
//建立一个存单品数量的数组，数组的长度是商品种类的数量,
//数组的下标与价格标签里的name的值相对应，
let length = list.children.length
let countArray = new Array(length)
//初始化数组的值
for(let i = 0; i < countArray.length; i++) {
countArray[i] = 0
}
list.addEventListener('click',function (event) {
e = event.target || window.event
if (e.innerText == '+') {
//得到DOM价格元素
let price = e.parentElement
//获取价格元素name的值,作为存放单个数据的数组下标
let i = parseInt(price.getAttribute('name'))
countArray[i]++ //得出相对应购买的数量
//得到商品数量元素
let count = price.lastElementChild
count.style.display = 'block'
count.innerHTML = countArray[i]
//计算出商品品总价
n = parseInt(price.innerText.replace('￥',''))
total += n
totalPrice.innerHTML = `￥${total}`
}
},false)
//清空数据
empty.addEventListener('click',function (){
for(let i = 0; i < countArray.length; i++) {
countArray[i] = 0
eleCount[i].style.display = 'none'
}
totalPrice.innerHTML = '￥0'
total = 0
},false)
</script>
</body>
</html>