<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="keywords" content="购物车功能" />
<meta name="description" content="购物车功能" />
<meta name="author" content="KG" />
<meta charset="utf-8">
<title>购物车功能</title>
<link rel="shortcut icon" href="favicon.icon" />
</head>
<style>
body {
padding-bottom: 68px;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 840px;
margin: 0 auto;
}
ul::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul li {
margin: 30px 30px 0;
width: 300px;
box-shadow: 0px 0px 15px 0px #E0E0E0;
border-radius: 12px;
margin-bottom: 30px;
padding: 30px;
float: left;
}
ul li img {
width: 300px;
height: 300px;
margin-bottom: 20px;
}
ul li p {
margin-bottom: 20px;
position: relative;
padding: 20px 0;
}
ul li p::after {
position: absolute;
content: "";
top: 0;
left: 0;
height: 1px;
width: 100%;
border-bottom: 1px solid #999;
transform: scaleY(0.5);
}
ul li p::before {
position: absolute;
content: "";
bottom: 0;
left: 0;
height: 1px;
width: 100%;
border-bottom: 1px solid #999;
transform: scaleY(0.5);
}
ul li div {
display: flex;
justify-content: space-between;
align-items: center;
}
ul li div span {
color: #f33b45;
}
ul li div div span:nth-of-type(2) {
color: #000;
font-size: 16px;
display: inline-block;
margin: 0 20px;
}
ul li div div span:last-child,ul li div div span:first-child {
border: 1px solid #fc5400;
;
padding: 5px 10px;
color: #fc5400;
cursor: pointer;
}
.nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 68px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
box-shadow: 0 0 15px 0 #E0E0E0;
}
.nav span {
height: 100%;
width: 50%;
line-height: 68px;
text-align: center;
cursor: pointer;
}
.nav span:last-child {
padding-right: 30px;
background-color: #fc5400;
color: #fff;
}
.nav span:first-child {
padding-left: 30px;
color: #fc5400;
}
</style>
<body>
<div>
<ul></ul>
</div>
<!-- nav -->
<div class="nav">
<span class="sum"></span>
<span onclick="pay()">结算</span>
</div>
<script>
var goodsList = [{
id: 0,
title: '李宁',
price: '198',
description: '绝对正品，假一赔十',
count:0,
img: 'https://cdns.lining.com/postsystem/docroot/images/goods/202002/536281/thumb_display_536281_4.jpg'
}, {
id: 1,
title: '安踏',
price: '399',
description: '绝对正品，假一赔十',
count:0,
img: 'https://anta-cn-web.obs.myhwclouds.com/shopgoods/1/112011101D/112011101D-4-1.jpg?x-image-process=image/resize,w_800,h_800'
},
{
id: 2,
title: '耐克',
price: '499',
description: '绝对正品，假一赔十',
count:0,
img: 'https://static.nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/i1-d90b555a-fe92-4644-ac38-2da7c06839d0/air-max-2090-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-mp9K0V.jpg'
}
];
var _html = "";
// 遍历渲染数据
function showDataIntoDom(){
for(var i = 0; i < goodsList.length; i++) {
console.log('ok');
_html += '<li>';
_html +='<img src="'+goodsList[i].img+'" />';
_html += '<p>'+goodsList[i].description+'</p>';
_html += '<div><span>'+goodsList[i].price+'</span><div><span onclick="reduceShoppingCar('+i+')">-</span><span class="count">x'+goodsList[i].count+'</span><span onclick="addShoppingCar('+i+')">+</span></div></div>';
_html += '</li>';
}
document.getElementsByTagName('ul')[0].innerHTML = _html;
}
showDataIntoDom();
// 总额
sum();
// 添加商品数量
function addShoppingCar(index){
var currentItem=goodsList[index];
currentItem.count++;
var countObj=document.getElementsByClassName('count')[index]
countObj.innerHTML='x'+currentItem.count;
sum();
}
// 减少商品数量
function reduceShoppingCar(index){
var currentItem=goodsList[index];
if(currentItem.count==0){
alert('商品数量不能少于零');
return;
}
currentItem.count--;
var countObj=document.getElementsByClassName('count')[index]
countObj.innerHTML='x'+currentItem.count;
sum();
}
// 结算总额
function sum(){
var sum=0;
for(var i=0;i<goodsList.length;i++){
sum+=goodsList[i].price*goodsList[i].count;
}
console.log(sum);
document.getElementsByClassName('sum')[0].innerHTML='总额：'+sum+'元';
return sum;
}
// 结算
function pay(){
let sumMoney=sum();
alert('您将要支付'+sumMoney+'元');
}
</script>
</body>
</html>
浙公网安备 33010602011771号