【JavaScript】实现简易购物车-Toy模板网

这篇具有很好参考价值的文章主要介绍了【JavaScript】实现简易购物车。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

💻【JavaScript】实现简易购物车 🏠专栏：有趣实用案例
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

【JavaScript】实现简易购物车

最终效果：

简易购物车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

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪文章来源地址https://www.toymoban.com/news/detail-763177.html

到了这里，关于【JavaScript】实现简易购物车的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

【JavaScript】实现简易购物车

【JavaScript】实现简易购物车

一. 简介

二. HTML部分代码

三. CSS部分代码

四. JavaScript部分代码

五. 完整资源获取

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2