前言
随着电商业务的逐步发展,购物车成为了任何一家电商网站必备的功能之一。本文将介绍如何使用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中文网其他相关文章!