简易淘宝购物车
css:部分:
header {
width: 1200px;
margin: auto;
}
header p {
font-size: 50px;
color: #ff3b04;
}
header img {
width: 1000px;
}
.data_art {
display: flex;
margin-top: 20px;
width: 1000px;
margin-left: 170px;
}
.data_art div:nth-child(2) {
width: 440px;
}
.data_art div:nth-child(2) p {
margin-left: 180px;
}
.data_art div:nth-child(3) {
width: 100px;
margin-left: 30px;
}
.data_art div:nth-child(4) {
width: 100px;
margin-left: 10px;
}
.data_art div:nth-child(5) {
width: 80px;
margin-left: 20px;
}
.data_art div:nth-child(6) {
width: 100px;
}
article {
width: 1200px;
margin: auto;
height: 800px;
}
article section:nth-child(1) {
border-top: 5px solid skyblue;
width: 1000px;
}
article .xr {
width: 1000px;
height: 113px;
display: flex;
}
article .data-1 {
background-color: #def0ff;
line-height: 113px;
width: 64px;
text-align: center;
}
article .data-2 {
margin-left: 3px;
display: flex;
width: 440px;
background-color: #def0ff;
}
article .data-2 img {
margin-left: 10px;
}
article .data-2 div:nth-child(2) {
margin-left: 10px;
}
article .data-2 div:nth-child(2) p:nth-child(1) {
color: skyblue;
font-size: 15px;
margin-top: 10px;
margin-right: 10px;
}
article .data-2 div:nth-child(2) p {
font-size: 15px;
}
article .data-2 img {
height: 100px;
margin-top: 5px;
}
article .data-3 {
background-color: #def0ff;
width: 100px;
line-height: 113px;
text-align: center;
margin-left: 2px;
}
article .data-4 {
background-color: #def0ff;
width: 77px;
line-height: 113px;
text-align: center;
margin-left: 2px;
}
article .data-4 span {
color: red;
}
article .data_top {
margin-top: 20px;
}
article .data_top span {
font-size: 12px;
}
article .data_bot {
margin-top: 10px;
width: 1000px;
display: flex;
justify-content: space-between;
font-size: 14px;
}
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<header>
<p>淘宝网</p>
<span>您的位置 首页 >我的淘宝>我的购物车</span>
<img src="./tobaoimg/Snipaste_2021-01-08_17-29-06.png" alt="">
</header>
<div class="data_art">
<div><input type="checkbox" class="qx">全选</div>
<div>
<p>店铺宝贝</p>
</div>
<div>
<p>获积分</p>
</div>
<div>
<p>单价(元)</p>
</div>
<div>
<p>数量</p>
</div>
<div>
<p>小计(元)</p>
</div>
<div>
<p>操作</p>
</div>
</div>
<article>
</article>
<img src="./tobaoimg/taobao_minus.jpg" alt="">
<script src="./index.js">
</script>
</body>
</html>
js 部分:
let dataArr = [{
name: "纤巧白眉时尚鞋房",
name1: "纤巧白眉",
img: "./tobaoimg/taobao_cart_01.jpg",
yanse: "黑色",
cima: "33",
baozhang: "./tobaoimg/taobao_cart_01.jpg",
jifeng: "5",
danjia: "138",
count: "1",
pp: "日韩流行风时尚美美独爱拼图金属坡跟公主靴子黑色",
lianxi: "./tobaoimg/taobao_relation.jpg",
img1: "./tobaoimg/taobao_minus.jpg",
img2: "./tobaoimg/taobao_adding.jpg"
}, {
name: "纤巧白眉时尚鞋房",
name1: "纤巧白眉",
img: "./tobaoimg/taobao_cart_02.jpg",
yanse: "黑色",
cima: "33",
baozhang: "./tobaoimg/taobao_cart_01.jpg",
jifeng: "15",
danjia: "108",
count: "1",
pp: "日韩流行风时尚美美独爱拼图金属坡跟公主靴子黑色",
lianxi: "./tobaoimg/taobao_relation.jpg",
img1: "./tobaoimg/taobao_minus.jpg",
img2: "./tobaoimg/taobao_adding.jpg"
}, {
name: "纤巧白眉时尚鞋房",
name1: "纤巧白眉",
img: "./tobaoimg/taobao_cart_03.jpg",
yanse: "黑色",
cima: "33",
baozhang: "./tobaoimg/taobao_cart_01.jpg",
jifeng: "45",
danjia: "188",
count: "1",
pp: "日韩流行风时尚美美独爱拼图金属坡跟公主靴子黑色",
lianxi: "./tobaoimg/taobao_relation.jpg",
img1: "./tobaoimg/taobao_minus.jpg",
img2: "./tobaoimg/taobao_adding.jpg"
}, {
name: "纤巧白眉时尚鞋房",
name1: "纤巧白眉",
img: "./tobaoimg/taobao_cart_04.jpg",
yanse: "黑色",
cima: "33",
baozhang: "./tobaoimg/taobao_cart_01.jpg",
jifeng: "55",
danjia: "208",
count: "1",
pp: "日韩流行风时尚美美独爱拼图金属坡跟公主靴子黑色",
lianxi: "./tobaoimg/taobao_relation.jpg",
img1: "./tobaoimg/taobao_minus.jpg",
img2: "./tobaoimg/taobao_adding.jpg"
},
]
let artEle = document.getElementsByTagName("article")[0];
// 初始化页面
function xuanran() {
let str = "";
// 总价
let num = 0;
// 积分
let jf = 0;
dataArr.map((item, index) => {
str += "<section>"
str += `
<div class="data_top"><span>店铺:${item.name} 卖家:${item.name1}</span><img src="${item.lianxi}"><div>
<div class="xr">
<div class="data-1">
<input type="checkbox" name="sport" data-index="${index}">
</div>
<div class="data-2">
<div><img src="${item.img}"></div>
<div>
<p>${item.pp}</p>
<p>颜色:${item.yanse} 尺码:${item.cima}</p>
</div>
</div>
<div class="data-3">${item.jifeng}</div>
<div class="data-3">${item.danjia}</div>
<div class="data-3"><img src="${item.img1}" class="minus" id="11" data-index="${index}"> <input type="text" style="width:50px" value="${item.count}" data-index="${index}" id="jia"><img src="${item.img2}" class="adding" data-index="${index}"></div>
<div class="data-3">${item.count*item.danjia}</div>
<div class="data-4"><span class="sc" data-index="${index}">删除</span></div>
</div>
`
str += "</section>";
num += item.danjia * item.count;
jf += item.jifeng * item.count
})
str += `
<div class="data_bot">
<div><input type="button" value="删除所选" ></div>
<div>
<p>商品总价:${num}元</p>
<p>可获积分:${jf}点</p>
</div>
</div>`
artEle.innerHTML = str
}
xuanran()
let addingEle = document.getElementById("jia");
artEle.addEventListener("click", e => {
let event = e || window.event;
if (event.target.className == "sc") {
// 删除
dataArr.splice(event.target.dataset.index, 1);
xuanran()
} else if (event.target.className == "adding") {
dataArr[event.target.dataset.index].count = ++addingEle.value
xuanran()
} else if (event.target.className == "minus" && dataArr[event.target.dataset.index].count > 0) {
dataArr[event.target.dataset.index].count = --addingEle.value
if (dataArr[event.target.dataset.index].count == 0) {
// 如果商品等于0自动删除
dataArr.splice(event.target.dataset.index,1);
xuanran()
}
xuanran()
} else if (event.target.value == "删除所选") {
let arr = [...Sports]
for (let index in arr) {
if (arr[index].checked == true) {
dataArr.splice(index, 1)
xuanran()
}
}
}
})
// 全选
// 事件委托给body
let bodyEle = document.querySelector("body");
let k = 0;
let Sports = document.getElementsByName("sport");
bodyEle.addEventListener("click", e => {
let event = e || window.event;
if (event.target.className == "qx") {
// 取消全选
if (k == Sports.length) {
for (let i = 0; i < Sports.length; i++) {
Sports[i].checked = false;
k = 0;
}
} else {
// 全选
for (let i = 0; i < Sports.length; i++) {
Sports[i].checked = true;
k++;
}
}
}
})
artEle.addEventListener("change", e => {
let event = e || window.event;
if (event.target.type == "text") {
dataArr[event.target.dataset.index].count = event.target.value
xuanran()
}
})
浙公网安备 33010602011771号