【JavaScript】实现简易购物车

• 前端

💻【JavaScript】实现简易购物车 🏠专栏：有趣实用案例

👀个人主页：繁星学编程🍁

🧑个人简介：一个不断提高自我的平凡人🚀

🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀

👊格言：☀️没有走不通的路，只有不敢走的人！☀️

👉让我们一起进步，一起成为更好的自己！！！🎁

文章目录

  • 【JavaScript】实现简易购物车
    • 一. 简介
    • 二. HTML部分代码
    • 三. CSS部分代码
    • 四. JavaScript部分代码
    • 五. 完整资源获取

【JavaScript】实现简易购物车

最终效果：

请添加图片描述

一. 简介

本文主要分享一个简易的使用JavaScript编写的购物车。功能实现了：全选、清空购物车、删除单条商品、数据渲染、总价格计算、删除选中物品、添加和减少商品数量并且实现了操作数据后在浏览器本地永久存储。

二. HTML部分代码



  
  
  
  Document
  
  


  页面顶部
  
    
    <!--  全选
      
    
        
  • 
          
            
          
          
            【JavaScript】实现简易购物车
          
          我是一个手机, 不知道是啥
          单价￥ 100.00
          
            
            
            
          
          总价￥ 100.00
          
            
          
        
    • 
        
  • 
          
            
          
          
            【JavaScript】实现简易购物车
          
          我是一个手机, 不知道是啥
          单价￥ 100.00
          
            
            
            
          
          总价￥ 100.00
          
            
          
        
    • 
      

      
        总件数 : 3
        
          
          
          
        
        总价格 : ￥ 100.00
       -->
  
  
  页面底部

三. 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: '/img/71/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 += `
                <input  type="checkbox" https://blog.csdn.net/qq_45867247/article/details/${(checked =
                  totalSelnum === cartList.length
                    ? 'checked'
                    : '')}/> 全选
                
    `
  cartList.forEach(item => {
    // 拼接列表数据
    str += `    
          
  • 
            
              <input type="checkbox" https://blog.csdn.net/qq_45867247/article/details/${(checked =
                item.status === true
                  ? 'checked'
                  : '')}  data-id = "https://blog.csdn.net/qq_45867247/article/details/${item.id}"/>
            
            
              <img src="/img/64/${item.pic}"
                alt="" />
            
            https://blog.csdn.net/qq_45867247/article/details/${item.name}
            单价￥ https://blog.csdn.net/qq_45867247/article/details/${item.price}
            
              <button class = "sub" data-id = "https://blog.csdn.net/qq_45867247/article/details/${item.id}">-
              <input type="text" value="https://blog.csdn.net/qq_45867247/article/details/${item.number}" />
              <button class = "add" data-id = "https://blog.csdn.net/qq_45867247/article/details/${item.id}">+
            
            总价￥ https://blog.csdn.net/qq_45867247/article/details/${(item.price * item.number).toFixed(
              2
            )}
            
              <button  data-id = "https://blog.csdn.net/qq_45867247/article/details/${item.id}">删除
            
          
    • `
  })
  // 拼接结算数据
  str += `
    
        
          总件数 : https://blog.csdn.net/qq_45867247/article/details/${totalSum}
          
            
            <button  https://blog.csdn.net/qq_45867247/article/details/${
              !totalSelnum ? 'disabled' : ''
            } data-price = "https://blog.csdn.net/qq_45867247/article/details/${totalPrice}">去结算
            <button  https://blog.csdn.net/qq_45867247/article/details/${
              !totalSelnum ? 'disabled' : ''
            }>删除所有已选中
          
          总价格 : ￥ https://blog.csdn.net/qq_45867247/article/details/${totalPrice.toFixed(
            2
          )}
        `
  // 渲染
  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://net2asp.com/914ebb9d5a.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐