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