实现简单的购物车

最新推荐文章于 2024-08-26 08:33:56 发布
最新推荐文章于 2024-08-26 08:33:56 发布
阅读量62 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63477921/article/details/125601366
版权

<!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>

    <style>

      table {

        border-collapse: collapse;

      }

      td {

        border: 1px solid gray;

        padding: 10px;

        text-align: center;

      }

    </style>

  </head>

  <body>

    <table>

      <thead>

        <tr>

          <td><input type="checkbox" />全选</td>

          <td>序号</td>

          <td>商品名</td>

          <td>单价</td>

          <td>数量</td>

          <td>小计</td>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>xxx</td>

          <td>xxx</td>

          <td>xxx</td>

          <td>

            <button>-</button>

            <span>xxx</span>

            <button>+</button>

          </td>

          <td>xxx</td>

        </tr>

      </tbody>

      <tfoot>

        <tr>

          <td colspan="6">合计:xxx</td>

        </tr>

      </tfoot>

    </table>

    <script>

      const products = [

        { name: '苹果', price: 10, count: 30, checked: true },

        { name: '香蕉', price: 6, count: 3, checked: true },

        { name: '柿子', price: 26, count: 1, checked: true },

        { name: '哈密瓜', price: 19, count: 45, checked: true },

      ]

      const products_el = products.map((value, index) => {

        const { count, name, price, checked } = value

        // 添加自定义属性: index, 保存序号

        return `<tr data-index='${index}'>

          <td><input type="checkbox" ${checked ? 'checked' : ''} /></td>

          <td>${index + 1}</td>

          <td>${name}</td>

          <td>¥${price}</td>

          <td>

            <button ${count == 1 ? 'disabled' : ''}>-</button>

            <span>${count}</span>

            <button>+</button>

          </td>

          <td>¥${price * count}</td>

        </tr>`

      })

      document.querySelector('tbody').innerHTML = products_el.join('')

      // 难点1: + 和 -

      // 思路1: 查询所有的按钮, 遍历挨个添加 事件

      // 思路2: 委托 -> 只需要给按钮共同的父元素添加事件

      const tbody = document.querySelector('tbody')

      tbody.onclick = function (e) {

        // 过滤出按钮的点击

        if (e.target.localName == 'button') {

          console.log(e.target)

          // 按钮的 父元素 的 父元素的  自定义属性.index

          const index = e.target.parentElement.parentElement.dataset.index

          console.log('序号:', index)

          // 现在场景: 页面是通过数据数组生成的, 他们应该联动

          if (e.target.innerHTML == '+') {

            products[index].count++

          }

          if (e.target.innerHTML == '-') {

            products[index].count--

          }

          console.log(products)

          //更新对应序号的界面

          updateCell(index)

        }

      }

      // 数据变化后, 要同步更新对应的栏目

      function updateCell(index) {

        // 通过序号, 从tbody孩子中, 找到对应的一条

        const cell = tbody.children[index]

        const subtotal = cell.lastElementChild //小计元素

        // 数量: 小计上方元素的孩子中的序号1

        const count_el = subtotal.previousElementSibling.children[1]

        // 从数据数组中, 读取 单价 和 数量

        const { count, price } = products[index]

        // 把数据 赋值给 元素内容

        count_el.innerHTML = count

        subtotal.innerHTML = '¥' + price * count

        // -按钮

        const jian_el = count_el.previousElementSibling

        // 数量==1 是true, 则说明 不可用是 true

        // jian_el.disabled = count == 1 ? true : false

        jian_el.disabled = count == 1

        // 更新合计

        updateTotal()

      }

      //合计

      function updateTotal() {

        // 数组高阶函数: reduce, 合并归纳数组数据

        // sum是总和, 0是初始值, value是每次遍历的元素

        const total = products.reduce((sum, value) => {

          const { price, count, checked } = value

          // 只累加 勾选的元素的价格, 此处利用 true1 false0

          // 乘以 checked, 如果是false, 不勾选,就是0, 不累加

          return sum + price * count * checked

        }, 0)

        // 获取合计元素

        const total_el = document.querySelector('tfoot td')

        total_el.innerHTML = '合计: ¥' + total

      }

      // 初始时: 触发一次总和

      updateTotal()

      // 全选按钮初始状态:  数组中的每一个都是勾选,则全选真的

      const cha = document.querySelector('thead input')

      // 忘记的人: 回顾 JSCORE 的day03

      cha.checked = products.every(value => value.checked)

      // 全选按钮变化时, 让其他勾选都变化

      cha.onchange = function () {

        //找到其他的所有按钮

        const chs = document.querySelectorAll('tbody input')

        // 遍历每一项, 让其勾选状态 和 全选按钮的一致

        chs.forEach(value => (value.checked = cha.checked))

        // 同步更新数据中的 checked

        products.forEach(value => (value.checked = cha.checked))

        // 重新算总和

        updateTotal()

      }

      // 为每一个单选按钮, 添加change事件:

      const chs = document.querySelectorAll('tbody input')

      chs.forEach(value => {

        value.onchange = function () {

          // 获取序号

          const index = this.parentElement.parentElement.dataset.index

          // 修改对应数据项的checked属性, 与当前选框的 选中状态一样

          products[index].checked = this.checked

          // 更新总价格

          updateTotal()

          // 全选按钮要跟随单选变化: 数据中的每一个元素, 都是勾选才是全选

          cha.checked = products.every(value => value.checked)

        }

      })

    </script>

  </body>

</html>

铁锅小菜炖大鹅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现简单的购物车(加入购物车、统计价格)
得意小门生的博客
09-26 308
效果图： 说明： 1、实现购物车隐藏和显示切换功能，具体实现效果如下图 2、点击“添加购物车”，按钮颜色由红色变为绿色。 3、根据jquery.fly.js插件完成添加物品时，物品飞入到购物车效果。 4、完成购物车金额自动结算功能。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
简单实现购物车
lxsynl_的博客
08-24 392
iew物车首页布局   &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" ...
注释最全的Android购物车简单实现，复制可用，阅读可懂
分享人生
10-25 1089
Android前端购物车简单实现，代码可读性强，可理解性强，可扩展性强，注释齐全，复制可用，阅读可懂。
实现简易购物车
qq_48930299的博客
03-09 279
点击购买页面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"> &l.
DOM03
Rouer_jia的博客
02-20 286
DOM03DOM03复习双标签内容计数器计数器升级计数器委托小计数组转HTML练习练习 - 升级练习练习 - 将数据显示在表格中购物车 - 1.7pm 108分 DOM03 复习 DOM: Document Object Model 文档对象模型 HTML文本代码 -> 转化成DOM -> 显示在浏览器上 浏览器展示的是DOM, 通过操作DOM 就可以实时修改浏览器的效果 查找元素: 固定元素读取 document.head document.body document.documentEl
简单的购物车实现
Melect的博客
05-01 315
本片文章主要是简单实现购物车所以其中的数据是假数据，其中的图片和选择器都可以替换，只是简单实现一下使用二级列表实现的 主要的逻辑就是在适配器首先看一下数据源GoodBeanpackage bwie.com.test; import java.util.List; public class GoodBean { private List&lt;ContentBean&gt; conte...
购物车的简单实现
footprint01的博客
09-08 1032
打开eclipse建立，建立Dynamic Web Project 工程 命名 shoppingcart，注意需要配置xml文件。 工程目录建立如下图： ShopController.java import java.io.IOException; import java.lang.reflect.Method; import java.util.ArrayList; impor...
JSP+Servlet实现简易购物车功能
11-14
本项目“JSP+Servlet实现简易购物车功能”就是一个典型的示例，它展示了如何利用这两者来创建一个基本的在线购物系统。以下是关于这个项目及其涉及的技术点的详细解释： 1. **JSP（JavaServer Pages）**：JSP是一种...
jsp实现简易购物车
09-15
在这个“jsp实现简易购物车”的项目中，我们主要探讨如何使用JSP来构建一个基本的在线购物车功能。购物车是电商网站的核心部分，它允许用户选择并存储他们想要购买的商品，直到准备结账。 首先，我们要理解购物车的...
jsp+servlet+jdbc实现简单的购物车实例.zip
11-15
jsp+servlet+jdbc实现简单的购物车实例，购物数据通过session存储 1、加入购物车时，把数据保存在session中 2、点击系统退出时，购物车中的数据插入到数据库购物车表 3、再次登录时，查询数据库购物车表的数据加载到...
C#基于cookie实现的购物车功能
09-03
在本文中，我们将深入探讨如何使用C#语言通过Cookie实现一个简单的购物车功能。购物车功能是电子商务网站的核心部分，它允许用户选择商品并暂存，以便于后续结算。在C#中，我们可以利用ASP.NET的HttpCookie类来管理...
HTML简单的实现购物车
07-27
需要注意的是，虽然这个简单的实现可以满足基本需求，但在实际的电商网站中，购物车功能通常会涉及到更多的复杂性，如商品库存管理、用户会话维护、数据持久化等。此外，为了提供更好的用户体验，还可能需要使用CSS...
实现简单购物车
qq_42557251的博客
04-08 467
添加链接描述
购物车简单实现
qianana的博客
03-07 283
//ShopActivity public class ShopActivity extends AppCompatActivity implements IView ,View.OnClickListener{ private ShopAdapter adapter; private RecyclerView recyclerView_shop; IPersentermp...
实现购物车
daqi1983的博客
09-14 1658
一、购物车的实现流程 二、创建Book类，封装图书信息 public class Book implements Serializable { private static final long serialVersionUID = 1L; private String id; //书的编号 private String name; //书名 public Book() { } public Book(String id, String name) { this.id =
简易购物车实现
热门推荐
dream_s_a的博客
04-12 1万+
将购物车实现分成三部分分别实现： 第一部分：简单购物车功能实现； 第二部分：将商品序号改为勾选框； 第三部分：添加商店对商品进行分类。
实现购物车（简易网页）
qq_44769557的博客
10-05 3559
题目描述： 用户到便民超市采购商品，在购物前需要登录会员卡号，购物时先将选购的商品放入购物车，最后到柜台清点商品。请借助于ssion对象模拟购物车，并存储客户的会员卡号和购买的商品名称。会员卡号在输入后可以修改，购物车中的商品可以查看。编写程序模拟上述过程。loginID.jsp 实现会员卡号的输入，shop.jsp 实现商品导购，food.jsp 实现商品购物，countjsp实现清点商品。本节实践环节的4个JSP页面都保存在目录practice4中，运行loginID.jsp页面。 运行效果如图：
Python实现简单的购物车
Mogul的博客
08-31 7384
思路： 1.引导用户输入金额 2.引导用户选择商品 3.根据用户的选择将商品添加到购物车 4.删除商品 5.结算购物车，退出系统 # 购物车 # 商品名称作为key,商品数量作为value shoppingcar = {} # 添加商品 def addgoods(product, num): if num.isdigit(): # isdigit()如果字符串只包含数字则返回 True 否则返回 False。 num = int......
零基础5分钟上手亚马逊云科技-云原生架构设计
最新发布
m0_66628975的博客
08-26 1416
欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。我会每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS最佳实践，并应用到自己的日常工作里。
html代码实现简易购物车
06-12
好的，以下是一个简单的HTML代码实现简易购物车的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易购物车</title> </head> <body> <h1>商品列表</h1> <ul> <li> <span>商品1</span> <span>100元</span> <button onclick="addToCart(1)">添加到购物车</button> </li> <li> <span>商品2</span> <span>200元</span> <button onclick="addToCart(2)">添加到购物车</button> </li> <li> <span>商品3</span> <span>300元</span> <button onclick="addToCart(3)">添加到购物车</button> </li> <li> <span>商品4</span> <span>400元</span> <button onclick="addToCart(4)">添加到购物车</button> </li> </ul> <h1>购物车</h1> <ul id="cart"> </ul> <p>总价：<span id="totalPrice">0</span>元</p> <script> // 初始化商品列表和购物车 const products = [ { id: 1, name: '商品1', price: 100 }, { id: 2, name: '商品2', price: 200 }, { id: 3, name: '商品3', price: 300 }, { id: 4, name: '商品4', price: 400 }, ] let cart = [] // 添加商品到购物车 function addToCart(id) { const product = products.find(p => p.id === id) if (product) { cart.push(product) // 更新购物车页面 const cartList = document.getElementById('cart') const item = document.createElement('li') item.innerHTML = `${product.name}（${product.price}元）<button onclick="removeFromCart(${product.id})">移除</button>` cartList.appendChild(item) // 更新总价 const totalPrice = document.getElementById('totalPrice') totalPrice.innerText = getTotalPrice() } else { alert('商品不存在') } } // 从购物车中移除商品 function removeFromCart(id) { const index = cart.findIndex(p => p.id === id) if (index !== -1) { cart.splice(index, 1) // 更新购物车页面 const cartList = document.getElementById('cart') cartList.removeChild(cartList.childNodes[index]) // 更新总价 const totalPrice = document.getElementById('totalPrice') totalPrice.innerText = getTotalPrice() } else { alert('购物车中不存在该商品') } } // 计算购物车总价 function getTotalPrice() { return cart.reduce((total, product) => total + product.price, 0) } </script> </body> </html> ``` 在这个示例中，我们首先定义了一个商品列表和一个购物车数组，然后在页面中显示了商品列表和购物车。每个商品都有一个“添加到购物车”按钮，点击后调用`addToCart`函数将该商品添加到购物车中。购物车中的每个商品都有一个“移除”按钮，点击后调用`removeFromCart`函数将该商品从购物车中移除。同时，页面上会显示购物车中的商品列表和总价，这些数据会在添加或移除商品时动态更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值