效果图
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
</style>
<link rel="stylesheet" type="text/css" href="price.css" />
</head>
<body onselectstart="return false;">
<div class="wrap">
<div class="box">
<ul class="list">
<li>
<i></i>
<em>0</em>
<i></i>
<span>
单价：<strong>12.5元 </strong> 小计：<strong>0元</strong>
</span>
</li>
<li>
<i></i>
<em>0</em>
<i></i>
<span>
单价：<strong>10.5元 </strong> 小计：<strong>0元</strong>
</span>
</li>
<li>
<i></i>
<em>0</em>
<i></i>
<span>
单价：<strong>8.5元 </strong> 小计：<strong>0元</strong>
</span>
</li>
<li>
<i></i>
<em>0</em>
<i></i>
<span>
单价：<strong>8元 </strong> 小计：<strong>0元</strong>
</span>
</li>
<li>
<i></i>
<em>0</em>
<i></i>
<span>
单价：<strong>14.5元 </strong> 小计：<strong>0元</strong>
</span>
</li>
</ul>
<div class="info">
<span>商品公合计：<em>0</em>件</span>
<span>共花费了：<em>0</em>元</span>
<br />
<br />
<span>其中最贵的商品单价是：<em>0</em>元</span>
</div>
</div>
</div>
<script>
let list = document.querySelectorAll('li');
let lis = document.querySelectorAll('i');
let em = document.querySelectorAll(".info em")
function fn() {
var total = 0;
var expenditure = 0;
var mostExpensive = 0;//排序做的
for (var i = 0; i < list.length; i++) {
//数量
var count = list[i].children[1].innerHTML;
//单价
var price = parseFloat(list[i].children[3].children[0].innerHTML);
//小计
list[i].children[3].children[1].innerHTML = price * count + "元";
//总数量
total += parseFloat(list[i].children[1].innerHTML);
//总价格
expenditure += parseFloat(list[i].children[3].children[1].innerHTML);
if (count > 0) {
if (mostExpensive < price) {
mostExpensive = price
}
}
}
//总合计
em[0].innerHTML = total;
//总花费
em[1].innerHTML = expenditure;
//最贵
em[2].innerHTML = mostExpensive;
}
for (let i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
if (this.index % 2 === 0) {
//减
var count = this.nextElementSibling.innerHTML;
count > 0 ? count-- : count = 0
this.nextElementSibling.innerHTML = count
} else {
var count = this.previousElementSibling.innerHTML;
count < 50 ? count++ : count = 50;
this.previousElementSibling.innerHTML = count;
}
fn();
}
}
</script>
</body>
</html>
CSS
.wrap {
width: 764px;
height: 800px;
margin: 0 auto;
display: flex;
}
.box {
width: 479px;
height: 591px;
margin: auto;
background: url(bg1.png) no-repeat center center;
position: relative;
}
.list {
width: 100%;
position: absolute;
left: 0;
top: 138px;
}
.list li {
margin-bottom: 18px;
width: 100%;
height: 44px;
overflow: hidden;
box-sizing: border-box;
padding-left: 44px;
}
.list li i {
width: 52px;
height: 44px;
float: left;
margin-right: 10px;
cursor: pointer;
}
.list li i:nth-of-type(1) {
background: url(sub.png) no-repeat center center;
}
.list li i:nth-of-type(2) {
background: url(add.png) no-repeat center center;
}
.list li em {
width: 44px;
height: 36px;
float: left;
background: #fff;
border-radius: 5px;
font: 16px/36px arial;
text-align: center;
margin-right: 10px;
}
.list li span {
width: 247px;
height: 36px;
border-radius: 5px;
float: left;
margin-left: 10px;
background: #171818;
color: #878787;
line-height: 36px;
box-sizing: border-box;
padding-left: 15px;
}
.list li span strong {
margin-right: 10px;
}
.info {
width: 100%;
height: 140px;
position: absolute;
left: 0;
bottom: 0;
color: #878787;
box-sizing: border-box;
padding: 20px 0 0 42px;
}
.info em {
width: 46px;
height: 36px;
display: inline-block;
background: #fff;
border-radius: 5px;
font: 16px/36px arial;
text-align: center;
margin: 0 10px 0;
}
.info span:nth-of-type(2) em {
width: 66px;
}
.info span:nth-of-type(3) em {
width: 66px;
}
.info span:nth-of-type(1) {
margin-right: 20px;
}
资源
