JavaScript는 간단한 장바구니를 구현합니다.-프런트엔드 Q&A-php.cn

JavaScript는 간단한 장바구니를 구현합니다.

WBOY

풀어 주다： 2023-05-21 12:16:07

원래의

2335명이 탐색했습니다.

머리말

전자상거래 사업이 점진적으로 발전하면서 장바구니는 전자상거래 웹사이트의 필수 기능 중 하나가 되었습니다. 이 글에서는 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 code

다음으로 장바구니의 다양한 작업을 완료하기 위한 JavaScript 코드를 작성합니다. 먼저 장바구니 개체를 나타내는 Cart 생성자를 정의하고 몇 가지 일반적인 메서드를 추가합니다. 구체적인 구현은 다음과 같습니다. 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;
}

로그인 후 복사

다음으로 현재 장바구니에 있는 항목을 표시할 테이블로 렌더링하는 renderCart 함수를 작성합니다. 구체적인 구현은 다음과 같습니다.

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();
};

로그인 후 복사

마지막으로 페이지가 로드되면 장바구니 개체를 생성하고 모든 이벤트를 페이지 요소에 바인딩합니다. 구체적인 구현 내용은 다음과 같습니다.

rrreee

Summary

위 JavaScript 코드 구현을 통해 간단한 장바구니 기능을 성공적으로 완성했습니다. 다양한 전자상거래 사이트에 적용하여 전자상거래 사업의 쇼핑 기능을 쉽게 구현할 수 있습니다. 🎜

위 내용은 JavaScript는 간단한 장바구니를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!