因为上传图片有大小限制 所以可能不太清晰 需要高清运行图可以留言或私信我
html部分代码：
<body>
<ul class="wrapper">
<li class="nav">
<img src="images/dd_logo.jpg">
<button type="button" onclick="mai(this)">关闭</button>
</li>
<li>
<span>商品图片</span>
<span>商品信息</span>
<span>单价</span>
<span>数量</span>
<span>总价</span>
<span>操作</span>
</li>
<li>
<span><img src="images/dog.jpg"></span>
<span>我和狗狗活下来了</span>
<span><span>￥</span><span>21.90</span></span>
<span>
<button type="button" onclick="minus(this)">-</button>
<input type="text" id="" value="1" />
<button type="button" onclick="add(this)">+</button>
</span>
<span><span>￥</span><span id="y">21.90</span></span>
<span>
<p>移入收藏</p>
<p>删除</p>
</span>
</li>
<li>
<span><img src="images/mai.jpg"></span>
<span>
灰霾来了怎么办
</span>
<span><span>￥</span><span>24.00</span></span>
<span>
<button type="button" onclick="minus(this)">-</button>
<input type="text" id="" value="1" />
<button type="button" onclick="add(this)">+</button>
</span>
<span><span>￥</span><span id="e">24.00</span></span>
<span>
<p>移入收藏</p>
<p>删除</p>
</span>
</li>
<div class="foot">
<div>
<b>商品共计</b>
<span>￥</span>
<span class="sum">45.90</span>
</div>
<button type="button" onclick="js(this)">结算</button>
</div>
</ul>
</body>css部分代码:
<style type="text/css">
* {
list-style: none;
}
.wrapper {
width: 800px;
padding: 10px;
border: 1px solid;
}
li {
border-bottom: burlywood dotted 1px;
margin-bottom: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav {
border: none;
justify-content: space-between;
}
.nav>button,
.foot button {
height: 40px;
width: 100px;
border-radius: 15px;
background-color: orangered;
border: none;
outline: none;
align-self: center;
color: white;
font-size: 20px;
font-weight: 700;
}
li>span {
font-size: 12px;
text-align: center;
width: 150px;
}
span>img {
height: 90px;
}
input {
text-align: center;
width: 30px;
}
.foot {
display: flex;
justify-content: space-around;
}
.foot span {
color: #FF4500;
font-weight: 900;
}
</style>js部分代码：
<script type="text/javascript">
var _y = document.getElementById("y");
var _e = document.getElementById("e");
var _sum = document.querySelector(".sum");
function mai() {
alert("不买东西就想走？")
}
function minus(btn) {
//数量*价格
//1、获取到当前数量+1，并更新input框
var num = btn.parentElement.children[1].value;
if (num == 0) {
return;
}
btn.parentElement.children[1].value = --num;
//2、获取单价,字符串
var price = btn.parentElement.previousElementSibling.lastElementChild.innerText
//计算，并更新渲染 保留两位小数
var total = (parseFloat(price) * num).toFixed(2);
btn.parentElement.nextElementSibling.lastElementChild.innerText = total;
// 总价的和
_sum.innerText = (parseFloat(_y.innerText) + parseFloat(_e.innerText)).toFixed(2);
}
function add(btn) {
//数量*价格
//1、获取到当前数量+1，并更新input框
var num = btn.parentElement.children[1].value;
btn.parentElement.children[1].value = ++num;
//2、获取单价,字符串
var price = btn.parentElement.previousElementSibling.lastElementChild.innerText
//3、计算总价，并更新渲染 保留两位小数
var total = (parseFloat(price) * num).toFixed(2);
btn.parentElement.nextElementSibling.lastElementChild.innerText = total;
// 总价的和
_sum.innerText = (parseFloat(_y.innerText) + parseFloat(_e.innerText)).toFixed(2);
}
function js(){
alert("欢迎下次光临")
}
</script>有问题可以留言或私信我
