【JavaScript】实现简易购物车

最新推荐文章于 2024-03-18 23:01:18 发布
最新推荐文章于 2024-03-18 23:01:18 发布
阅读量5.8k 收藏 61
点赞数 7
分类专栏： 有趣实用案例 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45867247/article/details/128734759
版权

💻【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

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪

繁星学编程
关注
  • 7
    点赞
  • 踩
  • 61
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
HTML简单的实现购物车
07-27
HTML简单的实现购物车
js实现一个简单的购物车功能
m0_62164658的博客
08-17 781
可以进行全选，不全选，加购物车选定的数量，以及添加购物车的内容，以及前面功能实现时可以同步计算总价格。想要实现一个购物车的功能呢，要想好思路，以及你要考虑好实现的功能的问题。
简易购物车（HTML/CSS/JS）
最新发布
weixin_52841164的博客
03-18 358
简易购物车，使用html，js，css。能够新增减少商品数量；能够新增商品种类；能够计算商品总价，总价随着商品数量变化而变化。
简易实现购物车.zip
04-07
HTML5新手小案例，实现简单的购物车功能，新手代码，老鸟请跳过，简单易懂，没有过多的复杂的CSS，HTML5新手请笑纳。
用JavaScript实现简易购物车
01-08
无标题文档 .inputs{ width:50px; text-align: center; } 你已购买的商品:女士衣服 单价：100.00 数量为： 总价为： 100.00 JS: { //找标签 let jia = document.getElementById(jia); let jian=document.getElementById(jian); let txt = document.getElementB
javascript实现简易购物车(高手勿喷)
04-21
用Javascript写的一个简易购物车，主要是对表格的操作。新手。。高手勿喷。。换个积分不容易啊。
JS实现简单的购物车
dxn16638400024的博客
06-30 2651
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
简易购物车（最全代码解析）JavaScript（ES6面向对象）
CSErtuh的博客
09-08 3813
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <style type="text/css"> table { width: 50%; position: relative; margin: 0px auto; border-collapse: collapse; ...
[JavaScript实训] -- 制作简易的购物车页面
热门推荐
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
js实现购物车
m0_73481765的博客
06-30 3052
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
购物车——js小项目实例
u013430418的博客
09-08 4601
短短几周，js阶段的学习已然结束，结课作业就是实现一个购物车功能
【JavaScript源代码】JavaScript实现简易购物车最全代码解析(ES6面向对象).docx
12-29
JavaScript实现简易购物车最全代码解析(ES6面向对象) 　　本文实例为大家分享了JavaScript实现简易购物车的具体代码，供大家参考，具体内容如下 　　代码：　　<!DOCTYPE html>　　<html>　　 <head>　　  <meta charset="utf-8" />　　  <title>ES6购物车</title>　　  <style type="text/css">　　   table {　　    width: 50%;　　    position: relative;　　    margin: 0px auto;　　    border-collapse:
javascript简易购物车
10-14
javascript简易购物车 javascript简易购物车 javascript简易购物车 javascript简易购物车
【简易购物车】JavaScript实现简易购物车页面
陈俊卓的博客
07-08 1661
JavaScript实现简易购物车页面
JavaScript购物车的实现
qq_44061998的博客
04-03 927
购物车实现
【学习笔记46】JavaScript购物车的实现
yizhiyang
11-28 6711
JavaScript购物车的实现
js实现简单购物车
zhang_sir5768的博客
10-09 7762
介绍下如何使用js实现简单的购物车 功能如下：点击相应按钮，数量和价格会进行加减，点击相应的单选项，会将价钱显示到下面，全选按钮以及总价格。 代码如下： 小白，轻点喷。 ......
js实现购物车，原理简单，代码解释--＞详细
hnspystqxskzlqc的博客
04-06 8962
大家在淘宝或者京东购物时，看到在选中全选按钮，或者其他商品选中，从而触发全选按钮是怎么实现的吗？ 单商品的价格计算随着数量的增多减少而上升或者下降吗？ 总价随着每个商品的价格相加或相减，而变化吗？ 来看看下面的代码吧，实现以上所有功能。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <bo
用JavaScript来做简单的购物车案例
weixin_48745613的博客
12-07 1356
css代码： * { margin: 0; padding: 0; } a { text-decoration: none; color: rgb(54, 53, 53); } .container { width: 1000px; margin: 20px auto; ...
js简易购物车单击事件
04-23
可以在网页上实现简易购物车的功能，单击事件可以使用JavaScript来完成。具体的实现方式可以参考以下步骤： 1. 在HTML文档中创建一个购物车的容器，例如 <div id="cart"></div> 2. 在JavaScript中创建一个数组用于存放购物车的商品信息，例如 var cart = []; 3. 在商品的添加按钮上添加单击事件，例如 <button onclick="addToCart('商品名称', 商品价格)">添加到购物车</button> 4. 在JavaScript中编写addToCart函数，实现将商品添加到购物车数组的功能。例如： function addToCart(name, price) { var item = { name: name, price: price }; cart.push(item); updateCart(); } 5. 在JavaScript中编写updateCart函数，实现更新购物车界面的功能。例如： function updateCart() { var cartElem = document.getElementById('cart'); cartElem.innerHTML = ''; var total = 0; cart.forEach(function(item) { var itemElem = document.createElement('div'); itemElem.innerHTML = item.name + ': $' + item.price; cartElem.appendChild(itemElem); total += item.price; }); var totalElem = document.createElement('div'); totalElem.innerHTML = 'Total: $' + total; cartElem.appendChild(totalElem); } 6. 在购物车界面上显示商品信息和总价。例如： <div id="cart"> <div>商品1: $10</div> <div>商品2: $20</div> <div>Total: $30</div> </div> 通过以上步骤，就可以实现一个简易的购物车功能，用户可以通过单击添加按钮将商品添加到购物车中，购物车界面会自动更新显示商品信息和总价。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

繁星学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值