<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
outline: none;
}
table{
border-collapse: collapse;
}
td, th{
text-align: center;
border: 1px solid #ccc;
padding: 2px 10px;
}
td img{
width: 100px;
}
td input{
width: 40px;
text-align: center;
}
tfoot tr td{
text-align: right;
}
tfoot tr td span{
color: red;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<!-- 全选复选框 -->
<th>
<input type="checkbox" id="ckAll">全选
</th>
<th>商品名称</th>
<th>图片</th>
<th>单价</th>
<th>购买数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<!-- 总价 -->
<tr>
<td colspan="7">
<span>总计：￥</span>
<span id="total">0.00</span>
</td>
</tr>
</tfoot>
</table>
<script>
// 封装三个常用方法，简化代码
function $c(tagName) {
return document.createElement(tagName)
}
function $s(tagName) {
return document.querySelector(tagName)
}
function $sall(tagName) {
return document.querySelectorAll(tagName)
}
// 商品类
class Goods{
constructor(name, img, price, count, isck=false){
// 商品名称
this.name = name
// 图片
this.img = img
// 单价
this.price = price
// 购买数量
this.count = count
// 是否选中
this.isck = isck
}
}
// 商品数组
let goodses = [
new Goods('耐克球鞋', 'https://img14.360buyimg.com/n7/jfs/t1/139075/29/21692/356109/61a68a2cEd4712d8d/5b25f053b654a20b.png', 355, 3),
new Goods('阿迪球衣', 'https://img13.360buyimg.com/n7/jfs/t1/158689/25/22100/157235/61a98f1dEff59374e/b8ef8f0dce8f6e73.jpg', 255, 2),
new Goods('彪马裤子', 'https://img14.360buyimg.com/n7/jfs/t1/162140/38/26170/111069/61a84497Efee6e398/be1e9e2a452aa718.jpg', 188, 5),
new Goods('特步帽子', 'https://img14.360buyimg.com/n7/jfs/t1/212683/31/6073/219482/61a39749E88b89751/5010212b673cd014.jpg', 57, 4),
]
// 加载商品信息
function loadGoodses() {
// 遍历商品数组元素
goodses.forEach(g => {
let tr = $c('tr')
// 复选框列
let td1 = $c('td')
let ck = $c('input')
ck.type = 'checkbox'
ck.className = 'ck'
ck.checked = g.isck
// 注册复选框状态发生改变后事件
ck.onchange = function() {
g.isck = ck.checked
totalPrice()
$s('#ckAll').checked = goodses.every(r => r.isck)
}
td1.appendChild(ck)
// 商品名列
let td2 = $c('td')
td2.innerHTML = g.name
// 图片列
let td3 = $c('td')
let img = $c('img')
img.src = g.img
td3.appendChild(img)
// 单价列
let td4 = $c('td')
td4.innerHTML = '￥' + g.price.toFixed(2)
// toFixed(number n)方法，保留数字后n位
// 购买数量列
let td5 = $c('td')
// 减按钮
let btn1 = $c('button')
btn1.innerHTML = '-'
btn1.onclick = function() {
g.count--
// 数量至少为1
if(g.count < 1) g.count = 1
// 更新商品数量
icount.value = g.count
// 更新小计
td6.innerHTML = '￥' + (g.price * g.count).toFixed(2)
// 更新总价
totalPrice()
}
// 数字文本框
let icount = $c('input')
icount.value = g.count
// 加按钮
let btn2 = $c('button')
btn2.innerHTML = '+'
btn2.onclick = function() {
g.count++
icount.value = g.count
// 更新小计
td6.innerHTML = '￥' + (g.price * g.count).toFixed(2)
// 更新总价
totalPrice()
}
td5.appendChild(btn1)
td5.appendChild(icount)
td5.appendChild(btn2)
// 小计列
let td6 = $c('td')
td6.innerHTML = '￥' + (g.price * g.count).toFixed(2)
// 操作列(删除。。。)
let td7 = $c('td')
let del = $c('button')
del.innerHTML = '删除'
del.onclick = function() {
if(confirm('确定删除吗？')){
// 删除整行
tr.remove()
// 获取当前商品对象索引
let index = goodses.findIndex(r => r.name === g.name)
// 删除该对象
goodses.splice(index, 1)
// 更新总价
totalPrice()
}
}
td7.appendChild(del)
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tr.appendChild(td5)
tr.appendChild(td6)
tr.appendChild(td7)
$s('tbody').appendChild(tr)
})
}
// 加载商品信息
loadGoodses()
// 计算（更新）总价方法
function totalPrice() {
$s('#total').innerHTML = goodses.filter(r => r.isck).reduce((pre, goods) => pre + goods.price * goods.count, 0).toFixed(2)
}
// 给全选复选框注册状态改变后事件
$s('#ckAll').onchange = function() {
$sall('.ck').forEach(ck => {
ck.checked = this.checked
})
goodses.forEach(g => {
g.isck = this.checked
})
// 更新总价
totalPrice()
}
</script>
</body>
</html>
