查看购物车时,窗口下边是已经选购的商品列表,上方是网站推荐的商品,如果单击购买按钮,对应的商品就会放入个人的购物车,请用javascript技术来实现
时间: 2023-12-11 19:05:06 浏览: 79
基于JavaScript实现购物车功能
好的,下面是实现购物车的 JavaScript 代码:
首先,我们需要定义一个数组来存储购物车中已经选购的商品,可以命名为`cartItems`,如下所示:
```javascript
var cartItems = [];
```
接下来,我们需要编写一个函数,用于将选购的商品添加到购物车中。该函数需要接收一个参数,即要添加到购物车中的商品对象。我们可以将商品对象定义为一个包含商品名称、价格等属性的 JavaScript 对象。函数代码如下:
```javascript
function addToCart(item) {
cartItems.push(item);
console.log("商品已添加到购物车:", item);
}
```
然后,我们需要编写一个函数,用于显示购物车中已经选购的商品列表。该函数需要遍历`cartItems`数组,构建 HTML 元素来显示每个商品的信息。函数代码如下:
```javascript
function showCart() {
var cartList = document.getElementById("cart-list");
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);
}
}
```
最后,我们需要给购买按钮绑定一个点击事件,当用户点击按钮时,将对应的商品添加到购物车,并显示购物车中已经选购的商品列表。可以在 HTML 中添加如下代码来绑定点击事件:
```html
<button onclick="addToCart({name: '商品1', price: 100})">购买商品1</button>
<button onclick="addToCart({name: '商品2', price: 200})">购买商品2</button>
<button onclick="showCart()">查看购物车</button>
<ul id="cart-list"></ul>
```
这样,当用户点击购买按钮时,对应的商品将被添加到购物车中,并在控制台输出提示信息。当用户点击查看购物车按钮时,将显示购物车中已经选购的商品列表。
希望这个代码能够帮助您实现购物车功能。
阅读全文