简单购物车的网页代码示例
<!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;
}
.total {
font-weight: bold;
}
</style>
</head>
<body>
<h1>购物车</h1>
<table>
<tr>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th></th>
</tr>
<tr>
<td>商品1</td>
<td>$10</td>
<td><input type="number" value="1" min="1"></td>
<td class="subtotal">$10</td>
<td><button class="remove">移除</button></td>
</tr>
<tr>
<td>商品2</td>
<td>$20</td>
<td><input type="number" value="1" min="1"></td>
<td class="subtotal">$20</td>
<td><button class="remove">移除</button></td>
</tr>
<tr class="total">
<td></td>
<td></td>
<td></td>
<td>总计: $30</td>
<td></td>
</tr>
</table>
<script>
// 获取所有移除按钮
var removeButtons = document.getElementsByClassName('remove');
// 给每个移除按钮添加点击事件监听器
for (var i = 0; i < removeButtons.length; i++) {
removeButtons[i].addEventListener('click', function() {
var row = this.parentNode.parentNode;
row.parentNode.removeChild(row);
updateTotal();
});
}
// 获取所有数量输入框
var quantityInputs = document.querySelectorAll('input[type="number"]');
// 给每个数量输入框添加更改事件监听器
for (var i = 0; i < quantityInputs.length; i++) {
quantityInputs[i].addEventListener('change', function() {
var quantity = this.value;
var price = this.parentNode.previousElementSibling.innerText.replace('$', '');
var subtotal = quantity * price;
this.parentNode.nextElementSibling.innerText = '$' + subtotal;
updateTotal();
});
}
// 更新总计
function updateTotal() {
var subtotals = document.getElementsByClassName('subtotal');
var total = 0;
for (var i = 0; i < subtotals.length; i++) {
total += parseFloat(subtotals[i].innerText.replace('$', ''));
}
document.getElementsByClassName('total')[0].lastElementChild.innerText = '总计: $' + total;
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qgm9 著作权归作者所有。请勿转载和采集!