javascript实现简单购物车-前端问答-PHP中文网

首页

web前端

前端问答

javascript实现简单购物车

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2023 pm 12:16 PM

前言

随着电商业务的逐步发展，购物车成为了任何一家电商网站必备的功能之一。本文将介绍如何使用JavaScript实现一个简单的购物车，包括添加商品、删除商品、清空购物车等基本功能。

HTML 结构

我们先来看一下购物车页面的基本HTML结构。这里，我们采用一个表格来展示购物车中的商品，并用JavaScript来动态生成表格行。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>购物车示例</title>
  </head>
  <body>
    <h1>购物车</h1>
    <table id="cartTable">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
      <tfoot>
        <tr>
          <td colspan="4">总价：￥<span id="cartTotalPrice">0</span></td>
        </tr>
      </tfoot>
    </table>
    <p>
      <button id="clearCart">清空购物车</button>
    </p>
    <p>
      <label>商品名称：</label>
      <input type="text" id="productName">
      <label>价格：</label>
      <input type="text" id="productPrice">
      <label>数量：</label>
      <input type="text" id="productNumber">
      <button id="addProduct">添加商品</button>
    </p>
    <script src="cart.js"></script>
  </body>
</html>

JavaScript 代码

接下来，我们编写JavaScript代码来完成购物车的各种操作。我们先定义一个 Cart 构造函数来代表购物车对象，并添加一些常用方法。具体实现如下：

function Cart() {
  this.cartItems = []; // 存储购物车中的商品
  this.totalPrice = 0; // 购物车中所有商品的总价
}

// 清空购物车
Cart.prototype.clear = function() {
  this.cartItems = [];
  this.totalPrice = 0;
};

// 添加商品到购物车中
Cart.prototype.addProduct = function(productName, productPrice, productNumber) {
  // 判断购物车中是否已经存在该商品
  for (var i = 0; i < this.cartItems.length; i++) {
    if (this.cartItems[i].productName === productName) {
      this.cartItems[i].productNumber += productNumber;
      this.calculateTotalPrice();
      return;
    }
  }

  // 如果购物车中不存在该商品，则将该商品添加到购物车中
  var newCartItem = {
    productName: productName,
    productPrice: productPrice,
    productNumber: productNumber
  };
  this.cartItems.push(newCartItem);
  this.calculateTotalPrice();
};

// 从购物车中移除指定商品
Cart.prototype.removeProduct = function(productName) {
  for (var i = 0; i < this.cartItems.length; i++) {
    if (this.cartItems[i].productName === productName) {
      this.cartItems.splice(i, 1);
      this.calculateTotalPrice();
      return;
    }
  }
};

// 计算购物车中所有商品的总价
Cart.prototype.calculateTotalPrice = function() {
  this.totalPrice = 0;
  for (var i = 0; i < this.cartItems.length; i++) {
    this.totalPrice += this.cartItems[i].productPrice * this.cartItems[i].productNumber;
  }
};

接下来，我们编写一个函数 renderCart，用来将当前购物车中的商品渲染到表格中显示。具体实现如下：

function renderCart() {
  var cartTable = document.getElementById("cartTable");
  var cartTbody = cartTable.getElementsByTagName("tbody")[0];
  // 先清空表格
  cartTbody.innerHTML = "";

  for (var i = 0; i < cart.cartItems.length; i++) {
    var cartItem = cart.cartItems[i];

    var productRow = document.createElement("tr");
    var productNameCell = document.createElement("td");
    var productNameText = document.createTextNode(cartItem.productName);
    productNameCell.appendChild(productNameText);
    productRow.appendChild(productNameCell);

    var productPriceCell = document.createElement("td");
    var productPriceText = document.createTextNode(cartItem.productPrice);
    productPriceCell.appendChild(productPriceText);
    productRow.appendChild(productPriceCell);

    var productNumberCell = document.createElement("td");
    var productNumberText = document.createTextNode(cartItem.productNumber);
    productNumberCell.appendChild(productNumberText);
    productRow.appendChild(productNumberCell);

    var removeProductCell = document.createElement("td");
    var removeProductButton = document.createElement("button");
    removeProductButton.innerHTML = "删除";
    (function(index) {
      removeProductButton.addEventListener("click", function() {
        cart.removeProduct(cart.cartItems[index].productName);
        renderCart();
      });
    })(i);
    removeProductCell.appendChild(removeProductButton);
    productRow.appendChild(removeProductCell);

    cartTbody.appendChild(productRow);
  }

  // 更新总价
  var cartTotalPrice = document.getElementById("cartTotalPrice");
  cartTotalPrice.innerHTML = cart.totalPrice;
}

最后，在页面加载完成时，我们创建购物车对象并将所有事件绑定到页面元素上。具体实现如下：

var cart = new Cart();

window.onload = function() {
  var addProductButton = document.getElementById("addProduct");
  addProductButton.addEventListener("click", function() {
    var productName = document.getElementById("productName").value;
    var productPrice = parseFloat(document.getElementById("productPrice").value);
    var productNumber = parseInt(document.getElementById("productNumber").value);
    if (productName && productPrice && productNumber) {
      cart.addProduct(productName, productPrice, productNumber);
      renderCart();
    } else {
      alert("商品名称、价格和数量都不能为空！");
    }
  });

  var clearCartButton = document.getElementById("clearCart");
  clearCartButton.addEventListener("click", function() {
    cart.clear();
    renderCart();
  });

  renderCart();
};

总结

通过以上JavaScript代码的实现，我们成功地完成了一个简单的购物车功能。我们可以将其应用到各种电商网站中，轻松实现电商业务的购物功能。

以上是javascript实现简单购物车的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

反应：JavaScript库用于Web开发的功能Apr 18, 2025 am 12:25 AM

React是由Meta开发的用于构建用户界面的JavaScript库，其核心是组件化开发和虚拟DOM技术。1.组件与状态管理：React通过组件（函数或类）和Hooks（如useState）管理状态，提升代码重用性和维护性。2.虚拟DOM与性能优化：通过虚拟DOM，React高效更新真实DOM，提升性能。3.生命周期与Hooks：Hooks（如useEffect）让函数组件也能管理生命周期，执行副作用操作。4.使用示例：从基本的HelloWorld组件到高级的全局状态管理（useContext和

React的生态系统：库，工具和最佳实践Apr 18, 2025 am 12:23 AM

React生态系统包括状态管理库（如Redux）、路由库（如ReactRouter）、UI组件库（如Material-UI）、测试工具（如Jest）和构建工具（如Webpack）。这些工具协同工作，帮助开发者高效开发和维护应用，提高代码质量和开发效率。

React和前端开发：全面概述Apr 18, 2025 am 12:23 AM

React是由Facebook开发的用于构建用户界面的JavaScript库。1.它采用组件化和虚拟DOM技术，提高了UI开发的效率和性能。2.React的核心概念包括组件化、状态管理（如useState和useEffect）和虚拟DOM的工作原理。3.在实际应用中，React支持从基本的组件渲染到高级的异步数据处理。4.常见错误如忘记添加key属性或不正确的状态更新可以通过ReactDevTools和日志调试。5.性能优化和最佳实践包括使用React.memo、代码分割和保持代码的可读性与可维

HTML中的反应力量：现代网络开发Apr 18, 2025 am 12:22 AM

React在HTML中的应用通过组件化和虚拟DOM提升了web开发的效率和灵活性。1)React组件化思想将UI分解为可重用单元，简化管理。2)虚拟DOM优化性能，通过diffing算法最小化DOM操作。3)JSX语法允许在JavaScript中编写HTML，提升开发效率。4)使用useState钩子管理状态，实现动态内容更新。5)优化策略包括使用React.memo和useCallback减少不必要的渲染。