js简易购物车单击事件

可以在网页上实现简易购物车的功能，单击事件可以使用JavaScript来完成。具体的实现方式可以参考以下步骤：

1. 在HTML文档中创建一个购物车的容器，例如 <div id="cart"></div>
2. 在JavaScript中创建一个数组用于存放购物车的商品信息，例如 var cart = [];
3. 在商品的添加按钮上添加单击事件，例如 <button onclick="addToCart('商品名称', 商品价格)">添加到购物车</button>
4. 在JavaScript中编写addToCart函数，实现将商品添加到购物车数组的功能。例如：

function addToCart(name, price) {
var item = { name: name, price: price };
cart.push(item);
updateCart();
}

5. 在JavaScript中编写updateCart函数，实现更新购物车界面的功能。例如：

function updateCart() {
var cartElem = document.getElementById('cart');
cartElem.innerHTML = '';
var total = 0;
cart.forEach(function(item) {
var itemElem = document.createElement('div');
itemElem.innerHTML = item.name + ': $' + item.price;
cartElem.appendChild(itemElem);
total += item.price;
});
var totalElem = document.createElement('div');
totalElem.innerHTML = 'Total: $' + total;
cartElem.appendChild(totalElem);
}

6. 在购物车界面上显示商品信息和总价。例如：

<div id="cart">
<div>商品1: $10</div>
<div>商品2: $20</div>
<div>Total: $30</div>
</div>

通过以上步骤，就可以实现一个简易的购物车功能，用户可以通过单击添加按钮将商品添加到购物车中，购物车界面会自动更新显示商品信息和总价。