帮我用 html+css+JavaScript 等技术,做一个购物车
时间: 2024-03-14 13:43:59 浏览: 41
好的,我可以帮您做一个简单的购物车。首先,我们需要一个 HTML 页面来显示购物车的商品和价格:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<style>
/* 定义样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
.total {
text-align: right;
}
</style>
</head>
<body>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>10.00</td>
<td><input type="number" value="1"></td>
<td>10.00</td>
</tr>
<tr>
<td>商品2</td>
<td>20.00</td>
<td><input type="number" value="1"></td>
<td>20.00</td>
</tr>
<tr class="total">
<td colspan="3">总计</td>
<td>30.00</td>
</tr>
</tbody>
</table>
</body>
</html>
```
这里我们用了一个表格来显示购物车商品,每个商品有商品名称、价格、数量和小计四个属性。在最后一行,我们使用 `colspan="3"` 来让“总计”这个单元格跨越三列。
接下来,我们需要使用 JavaScript 来实现购物车的功能,包括计算小计和总计、添加商品、删除商品等。为了方便,我们使用 jQuery 库来简化操作。
首先,我们添加一个按钮来删除商品:
```html
<tr>
<td>商品1</td>
<td>10.00</td>
<td><input type="number" value="1"></td>
<td>10.00 <button class="delete">删除</button></td>
</tr>
```
然后,我们添加一些 JavaScript 代码:
```html
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function() {
// 计算小计和总计
function updateTotal() {
var total = 0;
$('tbody tr').each(function() {
var price = parseFloat($(this).find('td:eq(1)').text());
var quantity = parseInt($(this).find('input[type="number"]').val());
var subtotal = price * quantity;
$(this).find('td:eq(3)').text(subtotal.toFixed(2));
total += subtotal;
});
$('.total td:eq(1)').text(total.toFixed(2));
}
// 添加商品
$('.add').click(function() {
var name = prompt('请输入商品名称:');
if (name) {
var price = parseFloat(prompt('请输入商品价格:'));
if (!isNaN(price)) {
var quantity = parseInt(prompt('请输入商品数量:'));
if (!isNaN(quantity)) {
var subtotal = price * quantity;
var tr = $('<tr><td></td><td></td><td><input type="number" value=""></td><td></td></tr>');
tr.find('td:eq(0)').text(name);
tr.find('td:eq(1)').text(price.toFixed(2));
tr.find('input[type="number"]').val(quantity);
tr.find('td:eq(3)').text(subtotal.toFixed(2) + ' <button class="delete">删除</button>');
$('tbody').append(tr);
updateTotal();
}
}
}
});
// 删除商品
$('tbody').on('click', '.delete', function() {
$(this).closest('tr').remove();
updateTotal();
});
// 修改数量
$('tbody').on('input', 'input[type="number"]', function() {
updateTotal();
});
// 初始化总计
updateTotal();
});
</script>
```
这里我们定义了一个 `updateTotal` 函数来计算小计和总计。它首先遍历每个商品行,获取商品价格和数量,计算小计并更新显示。然后累加所有商品的小计得到总计,并更新显示。
然后我们添加了一个按钮来添加商品。它会弹出对话框要求输入商品名称、价格和数量,并根据输入创建一个新的商品行。
最后,我们使用 jQuery 的 `on` 方法来添加事件处理程序。当点击删除按钮时,它会找到最近的商品行并删除它。当修改数量时,它会重新计算小计和总计。
现在,我们就完成了一个简单的购物车。您可以在此基础上继续扩展,增加更多功能和样式。
相关推荐
![](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)