请给出js购物车案例的代码
时间: 2023-06-02 20:03:20 浏览: 72
以下是一个简单的JavaScript购物车案例代码:
HTML代码:
```html
<div id="items">
<div class="item">
<img src="item1.jpg">
<h4>商品1</h4>
<p>价格:¥100</p>
<button onclick="addToCart('商品1', 100)">加入购物车</button>
</div>
<div class="item">
<img src="item2.jpg">
<h4>商品2</h4>
<p>价格:¥200</p>
<button onclick="addToCart('商品2', 200)">加入购物车</button>
</div>
<div class="item">
<img src="item3.jpg">
<h4>商品3</h4>
<p>价格:¥300</p>
<button onclick="addToCart('商品3', 300)">加入购物车</button>
</div>
</div>
<div id="cart">
<h2>购物车</h2>
<ul id="cartItems">
</ul>
<p id="totalPrice">总价:¥0</p>
</div>
```
JavaScript代码:
```javascript
var cartItems = []; //购物车商品列表
var totalPrice = 0; //购物车总价
//添加商品到购物车
function addToCart(name, price) {
cartItems.push({
name: name,
price: price
});
totalPrice += price;
updateCart(); //更新购物车
}
//更新购物车
function updateCart() {
var cartList = document.getElementById("cartItems");
cartList.innerHTML = "";
for (var i = 0; i < cartItems.length; i++) {
var item = cartItems[i];
var li = document.createElement("li");
li.innerHTML = item.name + " - ¥" + item.price;
cartList.appendChild(li);
}
document.getElementById("totalPrice").innerHTML = "总价:¥" + totalPrice;
}
```
在这个示例中,有一个商品列表和一个购物车列表。每个商品都有一个名称和价格,并带有一个“加入购物车”按钮。当用户单击“加入购物车”按钮时,商品将被添加到购物车中。购物车总价会随着添加的商品实时更新。最后,所有商品会在购物车列表中列出,同时显示合计价格。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)