js写一个购物车
时间: 2023-08-12 15:07:19 浏览: 45
好的,下面是一个简单的购物车示例:
```
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<script>
var cart = []; // 存储购物车商品的数组
// 添加商品到购物车
function addToCart(name, price) {
var item = {
name: name,
price: price
};
cart.push(item);
updateCart();
}
// 更新购物车列表和总价
function updateCart() {
var cartList = document.getElementById("cart-list");
var cartTotal = document.getElementById("cart-total");
cartList.innerHTML = ""; // 清空购物车列表
var total = 0;
for (var i = 0; i < cart.length; i++) {
var item = cart[i];
var li = document.createElement("li");
li.innerHTML = item.name + " - ¥" + item.price;
cartList.appendChild(li); // 添加购物车商品到列表中
total += item.price;
}
cartTotal.innerHTML = "总价:¥" + total;
}
</script>
</head>
<body>
<h1>购物车</h1>
<ul id="cart-list"></ul>
<p id="cart-total">总价:¥0</p>
<hr>
<h2>商品列表</h2>
<ul>
<li>苹果 - ¥5 <button onclick="addToCart('苹果', 5)">加入购物车</button></li>
<li>香蕉 - ¥3 <button onclick="addToCart('香蕉', 3)">加入购物车</button></li>
<li>橙子 - ¥4 <button onclick="addToCart('橙子', 4)">加入购物车</button></li>
</ul>
</body>
</html>
```
上面的代码定义了一个 `cart` 数组,用于存储购物车中的商品。`addToCart` 函数用于将商品添加到购物车中,并调用 `updateCart` 函数更新购物车列表和总价。`updateCart` 函数遍历 `cart` 数组,将每个商品添加到购物车列表中,并计算出购物车的总价。最后,HTML 中的商品列表通过调用 `addToCart` 函数来添加商品到购物车中。