💻【JavaScript】实现简易购物车 🏠专栏：有趣实用案例
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁
文章目录
- 【JavaScript】实现简易购物车
- 一. 简介
- 二. HTML部分代码
- 三. CSS部分代码
- 四. JavaScript部分代码
- 五. 完整资源获取
【JavaScript】实现简易购物车
最终效果：
一. 简介
本文主要分享一个简易的使用JavaScript编写的购物车。功能实现了：全选、清空购物车、删除单条商品、数据渲染、总价格计算、删除选中物品、添加和减少商品数量并且实现了操作数据后在浏览器本地永久存储。
二. HTML部分代码
<!DOCTYPE html> <html lang="en"> <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>Document</title> <!--引入外部css样式--> <link rel="stylesheet" href="./index.css" /> </head> <body> <div class="header">页面顶部</div> <div class="content"> <!-- 要渲染位置 --> <!-- <div class="top"><input class="toggleAll" type="checkbox" /> 全选</div> <ul> <li> <div class="status"> <input type="checkbox" /> </div> <div class="show"> <img src="https://img1.baidu.com/it/u=2511310783,721605137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332" alt="" /> </div> <div class="title">我是一个手机, 不知道是啥</div> <div class="price">单价￥ 100.00</div> <div class="number"> <button>-</button> <input type="text" value="1" /> <button>+</button> </div> <div class="sub">总价￥ 100.00</div> <div class="destory"> <button>删除</button> </div> </li> <li> <div class="status"> <input type="checkbox" /> </div> <div class="show"> <img src="https://img1.baidu.com/it/u=2511310783,721605137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332" alt="" /> </div> <div class="title">我是一个手机, 不知道是啥</div> <div class="price">单价￥ 100.00</div> <div class="number"> <button>-</button> <input type="text" value="1" /> <button>+</button> </div> <div class="sub">总价￥ 100.00</div> <div class="destory"> <button>删除</button> </div> </li> </ul> <div class="bottom"> <div class="totalNum">总件数 : 3</div> <div class="btns"> <button class="clear">清空购物车</button> <button class="buy">去结算</button> <button class="removeComplete">删除所有已选中</button> </div> <div class="totalPrice">总价格 : ￥ <span>100.00</span></div> </div> --> </div> <!-- 渲染结束 --> <div class="footer">页面底部</div> </body> </html> <!--引入外部js文件--> <script src="go.js"></script>
三. CSS部分代码
* { margin: 0; padding: 0; } ul, ol, li { list-style: none; } .header, .footer { width: 1200px; height: 100px; background-color: skyblue; color: #fff; font-size: 50px; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .footer { height: 400px; } .content { width: 1200px; margin: 0 auto; padding: 10px 0; } .content > .top, .content > .bottom { height: 50px; background-color: pink; display: flex; align-items: center; } .content > .bottom { justify-content: space-between; box-sizing: border-box; padding: 0 10px; } .content > .bottom > .totalPrice > span { font-size: 20px; color: red; } .content > .bottom > .btns > button { font-size: 18px; padding: 5px 10px; cursor: pointer; } .content > .top > input { width: 30px; height: 30px; margin: 0 15px 0 50px; } .content > ul { padding-top: 10px; } .content > ul > li { width: 100%; border: 1px solid #333; box-sizing: border-box; height: 100px; margin-bottom: 10px; display: flex; } .content > ul > li > div { display: flex; justify-content: center; align-items: center; border-right: 1px solid #333; } .content > ul > li > div:last-child { border: none; } .content > ul > li > .show, .content > ul > li > .status { width: 100px; } .content > ul > li > .status > input { width: 30px; height: 30px; } .content > ul > li > .show > img { width: 100%; height: 100%; display: block; } .content > ul > li > .price, .content > ul > li > .sub { width: 200px; color: red; font-size: 20px; } .content > ul > li > .title { width: 300px; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; padding: 5px; } .content > ul > li > .number { width: 230px; } .content > ul > li > .number > input { width: 50px; height: 30px; text-align: center; margin: 0 5px; border: none; outline: none; font-size: 18px; } .content > ul > li > .number > button { width: 30px; height: 30px; cursor: pointer; } .content > ul > li > .destory { flex: 1; } .content > ul > li > .destory > button { padding: 5px; font-size: 18px; cursor: pointer; }
四. JavaScript部分代码
let cartList = JSON.parse(localStorage.getItem('list')) || [ // 每一个对象就是一个购物车内容的数据 { id: 111234, // 商品编号，每个商品的唯一标识 status: true, // 是否选中 pic: 'https://img1.baidu.com/it/u=2511310783,721605137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332', name: '我是一个手机, 不知道是啥', price: 100, number: 3, // 购买3件 total: 16 // 库存 }, { id: 123456, status: true, pic: 'https://img1.baidu.com/it/u=1537709578,2453227648&fm=253&fmt=auto&app=120&f=JPEG?w=809&h=500', name: '我是一个电脑, 不知道是啥', price: 98.72, number: 1, total: 7 }, { id: 965874, status: false, pic: 'https://img2.baidu.com/it/u=3561506717,735421650&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500', name: '我是一个手纸, 不知道是啥', price: 356.21, number: 2, total: 22 } ] var content = document.querySelector('.content') // 查 -- 整合数据，拼接在页面上 --- 渲染数据 renderHTML() function renderHTML() { // 渲染 // 设置需要的变量（勾选的数量、总件数、总价格） // 勾选的数量 let totalSelnum = 0 // 总件数 let totalSum = 0 // 总价格 let totalPrice = 0 cartList.forEach(item => { // 判断数组中的status项是否为true if (item.status) { // 勾选的数量叠加 totalSelnum++ // 总件数 totalSum += item.number // 总价格 totalPrice += item.number * item.price } }) // 遍历数组 let str = `` // 拼接全选的数据 str += `<div class="top"> <input class="toggleAll" type="checkbox" ${(checked = totalSelnum === cartList.length ? 'checked' : '')}/> 全选</div> <ul>` cartList.forEach(item => { // 拼接列表数据 str += ` <li> <div class="status"> <input type="checkbox" ${(checked = item.status === true ? 'checked' : '')} class="checkbox" data-id = "${item.id}"/> </div> <div class="show"> <img src="${item.pic}" alt="" /> </div> <div class="title">${item.name}</div> <div class="price">单价￥ ${item.price}</div> <div class="number"> <button class = "sub" data-id = "${item.id}">-</button> <input type="text" value="${item.number}" /> <button class = "add" data-id = "${item.id}">+</button> </div> <div class="sub">总价￥ ${(item.price * item.number).toFixed( 2 )}</div> <div class="destory"> <button class="del" data-id = "${item.id}">删除</button> </div> </li>` }) // 拼接结算数据 str += `</ul> <div class="bottom"> <div class="totalSelnum">总件数 : ${totalSum}</div> <div class="btns"> <button class='clear'>清空购物车</button> <button class="buy" ${ !totalSelnum ? 'disabled' : '' } data-price = "${totalPrice}">去结算</button> <button class="removeComplete" ${ !totalSelnum ? 'disabled' : '' }>删除所有已选中</button> </div> <div class="totalPrice">总价格 : ￥ <span>${totalPrice.toFixed( 2 )}</span></div> </div>` // 渲染 content.innerHTML = str localStorage.setItem('list', JSON.stringify(cartList)) } // 利用事件委托处理删改增 // 判断当前点击的元素的className是否是需要触发事件的元素 content.onclick = function (e) { /* 全选 修改数据 渲染页面 */ // 全选 // 利用事件委托 if (e.target.className === 'toggleAll') { cartList.forEach(item => { item.status = e.target.checked }) renderHTML() } /* 清空购物 修改数据 渲染页面 */ if (e.target.className === 'clear') { if (confirm('请确定要清空购物车吗？')) { cartList = [] renderHTML() } } /* 结算 修改数据 渲染页面 */ if (e.target.className === 'buy') { console.log(e.target.dataset.price) } /* 删除已经选中 修改数据 渲染页面 */ if (e.target.className === 'removeComplete') { cartList = cartList.filter(item => { return !item.status }) renderHTML() } /* 每一项的+ 修改数据 渲染页面 */ if (e.target.className === 'add') { let add = cartList.find(item => { return item.id == e.target.dataset.id }) if (add.number < add.total) { add.number++ } renderHTML() } /* 每一项的 - 修改数据 渲染页面 */ if (e.target.className === 'sub') { let sub = cartList.find(item => { return item.id == e.target.dataset.id }) if (sub.number > 0) { sub.number-- } renderHTML() } /* 每一项的勾选 修改数据 渲染页面 */ if (e.target.className === 'checkbox') { // 查找数组中需要修改的这一项 let info = cartList.find(item => { return item.id == e.target.dataset.id }) info.status = !info.status renderHTML() } /* 每一项的删除 修改数据 渲染页面 */ if (e.target.className === 'del') { if (confirm('你确定要删除这一项吗？')) { cartList = cartList.filter(item => { return item.id != e.target.dataset.id }) renderHTML() } } }
五. 完整资源获取
完整的资源获取：
链接：https://pan.baidu.com/s/1TkfKTUkSyld8kEJbJlMrUw?pwd=yhc6 提取码：yhc6
结束语：
希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪
