javascript实现简单购物车

时间：2023-05-21 23:32

前言

随着电商业务的逐步发展，购物车成为了任何一家电商网站必备的功能之一。本文将介绍如何使用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实现简单购物车的详细内容，更多请关注Gxl网其它相关文章！