艾畅旗舰店
领劵 编辑
本店总计：￥0.00
用html,css和js写购物车移动端加减全反选及计算总价
目录
html代码
css代码
js代码
完整代码
效果图
html代码
购物车(6)
艾畅旗舰店
css代码
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background-color: #f0f2f5;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
overflow-y: auto;
}
.header {
width: 10rem;
height: 1.2rem;
background-color: white;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-left {
margin-left: .2667rem;
}
.header-right {
margin-right: .2667rem;
}
.img img {
width: 2.1333rem;
height: 2.1333rem;
margin-left: 1.0667rem;
}
/* .input{
border: 1px solid red;
} */
.input .input-inner {
display: inline-block;
background-color: white;
width: .8533rem;
/* height: .5867rem; */
height: .64rem;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
text-align: center;
/* font-size: .32rem; */
}
.increase,
.decrease {
width: .6133rem;
height: .5867rem;
outline: none;
font-size: .3733rem;
border: none;
background-color: white;
}
.right {
margin-right: .2667rem;
}
.right h3 {
font-size: .32rem;
}
.right .color {
font-size: .32rem;
color: #666;
}
.main {
margin-top: 1.4667rem
/* width: 10rem;
height: 2.4533rem; */
}
.main ul li {
width: 10rem;
height: 2.4533rem;
display: flex;
background-color: white;
}
#red {
font-size: .4267rem;
color: red;
}
.input {
display: inline-flex;
width: 2rem;
height: .64rem;
border: 1px solid #e5e5e5;
}
.flex {
display: flex;
justify-content: space-between;
}
.main ul {
/* margin-bottom: 2.6667rem; */
margin-bottom: .2667rem;
}
.main ul li {
margin-top: .2667rem;
/* border: 1px solid blue; */
}
.radio input {
width: .48rem;
height: .9333rem;
margin-top: .5333rem;
margin-left: .2667rem;
}
.footer {
width: 10rem;
height: 1.3333rem;
background-color: white;
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer .radio1 input {
width: .48rem;
height: .9333rem;
margin-top: .2667rem;
margin-left: .2667rem;
}
.select {
font-size: .32rem;
}
.footer .go {
width: 3.6rem;
height: 1.3067rem;
background-color: red;
color: white;
/* float: right; */
text-align: center;
/* font-size: .3733rem; */
display: inline-flex;
justify-content: center;
align-items: center;
}
.total {
margin-left: .4rem;
color: red;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.all {
width: 10rem;
/* height: 2.6667rem; */
height: .9333rem;
background-color: white;
margin-bottom: 1.6rem;
font-size: .32rem;
line-height: .9333rem;
text-align: right;
}
.digit {
/* margin-left: .4rem; */
margin-right: .4rem;
color: red;
}
.kin {
width: .5333rem;
height: .5333rem;
vertical-align: middle;
}
.main-top {
width: 10rem;
height: 1.0667rem;
background-color: white;
}
.radio2 input {
width: .48rem;
height: .9333rem;
margin-left: .2667rem;
margin-right: .5333rem;
}
.radio2 .ac {
font-size: .32rem;
}
.radio2 {
display: flex;
justify-content: space-between;
align-items: center;
}
.box2 span {
font-size: .32rem;
margin-right: .2667rem;
}
.box1 {
display: inline-flex;
align-items: center;
}js代码
const list = [
{
id: 1,
url: "./img/pd/sf-16.jpg",
count: 1,
isChecked: false,
price: 100
},
{
id: 2,
url: "./img/pd/sf-15.jpg",
count: 3,
isChecked: true,
price: 100.00
},
{
id: 3,
url: "./img/pd/sf-14.jpg",
count: 3,
isChecked: false,
price: 100.00
},
{
id: 4,
url: "./img/pd/sf-8.jpg",
count: 3,
isChecked: false,
price: 100.00
},
{
id: 5,
url: "./img/pd/sf-9.jpg",
count: 3,
isChecked: false,
price: 100.00
},
{
id: 6,
url: "./img/pd/sf-10.jpg",
count: 3,
isChecked: false,
price: 100.00
},
{
id: 7,
url: "./img/pd/sf-11.jpg",
count: 3,
isChecked: false,
price: 100.00
},
{
id: 8,
url: "./img/pd/sf-12.jpg",
count: 3,
isChecked: true,
price: 100.00
}
]
const checkAll = document.querySelector('#checkAll')
function render() {
let str = ''
for (let i = 0; i < list.length; i++) {
str += `
【黑卡96折】Apple苹果iPhone 7(A1660)移动联通电信4C手机国内...
重量:3.3kg颜色:标配版
￥${list[i].price}
${list[i].count}
`
}
checkAll.checked = list.every(ele => ele.isChecked === true)
//被勾选组成的数组
const newArr = list.filter(item => item.isChecked)
//计算总价
const totalPrice = newArr.reduce((prev, item) =>
prev += item.count * item.price
, 0)
document.querySelector('.all .digit').innerHTML = totalPrice.toFixed(2)
document.querySelector('.total .digitall').innerHTML = totalPrice.toFixed(2)
document.querySelector('ul').innerHTML = str
}
render()
const ul = document.querySelector('.main ul')
ul.addEventListener('click', function (e) {
//加
if (e.target.className === 'increase') {
const idx = e.target.parentNode.parentNode.parentNode.parentNode.dataset.id
list[idx].count++
render()
}
//减
if (e.target.className === 'decrease') {
const idx = e.target.parentNode.parentNode.parentNode.parentNode.dataset.id
list[idx].count--
if (list[idx].count <= 1) {
list[idx].count = 1
}
render()
}
//多选一
if (e.target.tagName === 'INPUT') {
const idx = e.target.parentNode.parentNode.dataset.id
list[idx].isChecked = e.target.checked
render()
}
})
//单个商店的全选
const cks = document.querySelectorAll('#cks')
checkAll.addEventListener('click', function () {
list.forEach(item => item.isChecked = this.checked)
render()
})
完整代码
Document
购物车(6)
艾畅旗舰店
领劵 编辑
本店总计：￥0.00
效果图
