1. 使用数组定义购物车,将数组中的商品信息动态显示在页面中。商品信息包括是否勾选、商品编号、商品名称、商品单价、商品数量。(注:复选框 checked属性表示勾选,数量采用输入框显示)
时间: 2023-11-29 12:12:36 浏览: 32
好的,我了解了您的问题。下面是一个示例代码,供您参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
</head>
<body>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="cart">
</tbody>
<tfoot>
<tr>
<td colspan="4">总计</td>
<td id="totalPrice"></td>
<td><button onclick="checkout()">结算</button></td>
</tr>
</tfoot>
</table>
<script>
// 商品信息数组
var items = [
{ id: 1, name: '商品1', price: 10.00 },
{ id: 2, name: '商品2', price: 20.00 },
{ id: 3, name: '商品3', price: 30.00 },
{ id: 4, name: '商品4', price: 40.00 },
{ id: 5, name: '商品5', price: 50.00 }
];
// 购物车数组
var cart = [];
// 动态生成购物车列表
function renderCart() {
var html = '';
var totalPrice = 0.00;
for (var i = 0; i < cart.length; i++) {
var item = cart[i];
var subtotal = item.price * item.quantity;
totalPrice += subtotal;
html += '<tr>';
html += '<td>' + item.id + '</td>';
html += '<td>' + item.name + '</td>';
html += '<td>' + item.price.toFixed(2) + '</td>';
html += '<td><input type="number" min="1" value="' + item.quantity + '" onchange="updateQuantity(' + i + ', this.value)"></td>';
html += '<td>' + subtotal.toFixed(2) + '</td>';
html += '<td><button onclick="removeItem(' + i + ')">删除</button></td>';
html += '</tr>';
}
document.getElementById('cart').innerHTML = html;
document.getElementById('totalPrice').innerHTML = totalPrice.toFixed(2);
}
// 添加商品到购物车
function addItem(id) {
for (var i = 0; i < cart.length; i++) {
if (cart[i].id === id) {
cart[i].quantity++;
renderCart();
return;
}
}
var item = items.find(function(item) {
return item.id === id;
});
cart.push({
id: item.id,
name: item.name,
price: item.price,
quantity: 1
});
renderCart();
}
// 更新商品数量
function updateQuantity(index, quantity) {
cart[index].quantity = parseInt(quantity);
renderCart();
}
// 删除商品
function removeItem(index) {
cart.splice(index, 1);
renderCart();
}
// 结算
function checkout() {
alert('结算成功!');
cart = [];
renderCart();
}
// 初始化
(function() {
for (var i = 0; i < items.length; i++) {
var item = items[i];
var html = '<label>';
html += '<input type="checkbox" onchange="addItem(' + item.id + ')">';
html += item.name + '(¥' + item.price.toFixed(2) + ')';
html += '</label>';
document.body.appendChild(document.createElement('p')).innerHTML = html;
}
})();
</script>
</body>
</html>
```
在上面的代码中,首先定义了一个 `items` 数组,保存了商品信息,包括商品编号、商品名称、商品单价。然后定义了一个空的 `cart` 数组,代表购物车。在页面加载时,使用 JavaScript 动态生成商品列表,并为每个商品添加一个复选框。当用户勾选复选框时,调用 `addItem` 函数将商品添加到购物车中。购物车中的商品信息使用一个表格动态显示,并且每个商品数量使用一个输入框来进行编辑。
在购物车表格的底部,还有一个“总计”行和一个“结算”按钮。当用户点击结算按钮时,弹出一个对话框显示结算成功,并清空购物车数组,重新渲染购物车表格。
希望这个示例能够帮助您解决问题,如有任何疑问,请随时向我提问。