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 id="购物车">购物车</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

反應與前端：建立互動體驗Apr 11, 2025 am 12:02 AM

React是構建交互式前端體驗的首選工具。 1)React通過組件化和虛擬DOM簡化UI開發。 2)組件分為函數組件和類組件，函數組件更簡潔，類組件提供更多生命週期方法。 3)React的工作原理依賴虛擬DOM和調和算法，提高性能。 4)狀態管理使用useState或this.state，生命週期方法如componentDidMount用於特定邏輯。 5)基本用法包括創建組件和管理狀態，高級用法涉及自定義鉤子和性能優化。 6)常見錯誤包括狀態更新不當和性能問題，調試技巧包括使用ReactDevTools和優

React和前端堆棧：工具和技術Apr 10, 2025 am 09:34 AM

React是一個用於構建用戶界面的JavaScript庫，其核心是組件化和狀態管理。 1)通過組件化和狀態管理簡化UI開發。 2)工作原理包括調和和渲染，優化可通過React.memo和useMemo實現。 3)基本用法是創建並渲染組件，高級用法包括使用Hooks和ContextAPI。 4)常見錯誤如狀態更新不當，可使用ReactDevTools調試。 5)性能優化包括使用React.memo、虛擬化列表和CodeSplitting，保持代碼可讀性和可維護性是最佳實踐。

React在HTML中的作用：增強用戶體驗Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。

REACT組件：在HTML中創建可重複使用的元素Apr 08, 2025 pm 05:53 PM

React組件可以通過函數或類定義，封裝UI邏輯並通過props接受輸入數據。 1)定義組件：使用函數或類，返回React元素。 2)渲染組件：React調用render方法或執行函數組件。 3)復用組件：通過props傳遞數據，構建複雜UI。組件的生命週期方法允許在不同階段執行邏輯，提升開發效率和代碼可維護性。