好的，我们来创建一个简单的购物车。首先，我们需要一个空的HTML页面。在这里，我们将包含一个商品列表和一个购物车列表。
<!DOCTYPE html> <html> <head> <title>购物车</title> </head> <body> <h1>商品列表</h1> <div id="product-list"></div> <h1>购物车</h1> <div id="cart"></div> <script> // 我们将代码添加到这里 </script> </body> </html>
接下来，我们需要一个数组来存储商品的信息。这个数组可以用一个JavaScript对象的数组来表示，每个对象都有商品的名称、价格和图片URL属性。
var products = [ { name: 'T恤', price: 19.99, image: 'https://via.placeholder.com/150' }, { name: '裤子', price: 39.99, image: 'https://via.placeholder.com/150' }, { name: '鞋子', price: 59.99, image: 'https://via.placeholder.com/150' } ];
接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。
var productContainer = document.getElementById('product-list'); for (var i = 0; i < products.length; i++) { var product = products[i]; var html = ` <div> <img src="${product.image}"> <h3>${product.name}</h3> <p>${product.price}</p> <button onclick="addToCart(${i})">加入购物车</button> </div> `; productContainer.insertAdjacentHTML('beforeend', html); }
我们使用了模板字面量（template literals）来创建包含商品信息的HTML代码。我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。这个函数将负责将商品添加到购物车中。
现在，我们需要一个数组来存储购物车中的物品。这个数组可以使用一个对象的数组来表示，每个对象都有商品的名称、价格和数量属性。
var cartItems = [];
接下来，我们需要编写addToCart函数。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
function addToCart(index) { var product = products[index]; var existingItemIndex = cartItems.findIndex(function (item) { return item.name === product.name; }); if (existingItemIndex >= 0) { cartItems[existingItemIndex].quantity++; } else { cartItems.push({ name: product.name, price: product.price, quantity: 1 }); } updateCart(); }
在这个函数中，我们首先从商品数组中取出被点击的商品。然后，我们搜索购物车数组，看看商品是否已经被添加到购物车中。如果是，我们增加购物车数组中相应物品的数量。如果不是，我们将新商品添加到购物车数组中。
现在，我们需要一个函数来更新购物车的HTML内容。
function updateCart() { var cartContainer = document.getElementById('cart'); cartContainer.innerHTML = ''; for (var i = 0; i < cartItems.length; i++) { var item = cartItems[i]; var html = ` <div> <h3>${item.name}</h3> <p>单价： ${item.price}</p> <p>数量： ${item.quantity}</p> </div> `; cartContainer.insertAdjacentHTML('beforeend', html); } }
这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。
最后，我们需要将所有代码放在一起。
<!DOCTYPE html> <html> <head> <title>购物车</title> </head> <body> <h1>商品列表</h1> <div id="product-list"></div> <h1>购物车</h1> <div id="cart"></div> <script> var products = [ { name: 'T恤', price: 19.99, image: 'https://via.placeholder.com/150' }, { name: '裤子', price: 39.99, image: 'https://via.placeholder.com/150' }, { name: '鞋子', price: 59.99, image: 'https://via.placeholder.com/150' } ]; var cartItems = []; var productContainer = document.getElementById('product-list'); for (var i = 0; i < products.length; i++) { var product = products[i]; var html = ` <div> <img src="${product.image}"> <h3>${product.name}</h3> <p>${product.price}</p> <button onclick="addToCart(${i})">加入购物车</button> </div> `; productContainer.insertAdjacentHTML('beforeend', html); } function addToCart(index) { var product = products[index]; var existingItemIndex = cartItems.findIndex(function (item) { return item.name === product.name; }); if (existingItemIndex >= 0) { cartItems[existingItemIndex].quantity++; } else { cartItems.push({ name: product.name, price: product.price, quantity: 1 }); } updateCart(); } function updateCart() { var cartContainer = document.getElementById('cart'); cartContainer.innerHTML = ''; for (var i = 0; i < cartItems.length; i++) { var item = cartItems[i]; var html = ` <div> <h3>${item.name}</h3> <p>单价： ${item.price}</p> <p>数量： ${item.quantity}</p> </div> `; cartContainer.insertAdjacentHTML('beforeend', html); } } </script> </body> </html>
现在，我们完成了一个简单的购物车。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。
