在现代电子商务中，购物车功能是一个至关重要的部分。用户可以在浏览在线商店时将心仪的商品添加到购物车中，便于之后进行结算。在这篇文章中，我们将使用简单的HTML和JavaScript来实现一个基本的购物车功能。
基本结构
首先我们需要构建一个基本的HTML结构。这里我们将简单地列出几款商品，并为每个商品提供一个“添加到购物车”的按钮。
HTML代码示例
<!DOCTYPE html> <html lang=zhCN> <head> <meta charset=UTF8> <title>购物车示例</title> <style> body { fontfamily: Arial, sansserif; } .product { margin: 20px 0; } .button { backgroundcolor: #4CAF50; color: white; border: none; padding: 10px 15px; cursor: pointer; } .cart { margintop: 30px; } </style> </head> <body> <h1>在线商店</h1> <p class=product> <h2>商品1</h2> <p>价格: ￥100</p> <button class=button onclick=addToCart(商品1, 100)>添加到购物车</button> </p> <p class=product> <h2>商品2</h2> <p>价格: ￥200</p> <button class=button onclick=addToCart(商品2, 200)>添加到购物车</button> </p> <p class=product> <h2>商品3</h2> <p>价格: ￥300</p> <button class=button onclick=addToCart(商品3, 300)>添加到购物车</button> </p> <p class=cart> <h2>购物车</h2> <ul id=cartList></ul> <p>总计: ￥0</p> </p> <script> let cart = []; let total = 0; function addToCart(name, price) { cart.push({ name, price }); total += price; updateCart(); } function updateCart() { const cartList = document.getElementById(cartList); cartList.innerHTML = ; cart.forEach(item => { const li = document.createElement(li); li.textContent = item.name + ￥ + item.price; cartList.appendChild(li); }); document.getElementById(totalPrice).textContent = total; } </script> </body> </html> 代码解析
上面的代码实现了一个简单的购物车程序。首先我们定义了三个商品，每个商品都有自己的名称和价格，并且在旁边放置一个“添加到购物车”的按钮。当点击按钮时，会调用 `addToCart` 函数。
在 `addToCart` 函数中，商品名称和价格会被推入一个名为 `cart` 的数组中，同时总价格 `total` 也会相应地更新。接着我们调用 `updateCart` 函数来更新购物车的展示内容。
在 `updateCart` 函数中，我们首先清空购物车列表，然后遍历购物车数组，为每个商品创建一个列表项，并更新总价格显示。
通过以上的简单示例，我们使用HTML和JavaScript实现了一个基础的购物车功能。虽然这个示例功能相对简单，但它为实现复杂的购物车系统奠定了基础。在实际项目中，您可能还需结合后端数据库和用户登录验证等功能来实现更专业、更完整的购物车系统。
希望这篇文章能够帮助您理解购物车功能的基本实现，祝您在电子商务开发中取得成功！
