html5购物车案例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
html5购物车案例下面是一个简单的HTML5购物车案例：```html
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<style>
table {
width: 100%;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
td {
border-bottom: 1px solid #ddd;
}
.total {
text-align: right;
font-weight: bold;
}
</style>
</head>
<body>
<h2>购物车</h2>
<table>
<tr>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr>
<td>苹果</td>
<td>$2.99</td>
<td><input type="number" id="quantity1" min="1" value="1"></td>
<td id="total1">$2.99</td>
</tr>
<tr>
<td>橙子</td>
<td>$1.99</td>
<td><input type="number" id="quantity2" min="1" value="1"></td>
<td id="total2">$1.99</td>
</tr>
<tr class="total">
<td colspan="3">总价</td>
<td id="grandTotal">$4.98</td>
</tr>
</table>
<script>
var quantity1 = document.getElementById('quantity1');
var quantity2 = document.getElementById('quantity2');
var total1 = document.getElementById('total1');
var total2 = document.getElementById('total2');
var grandTotal = document.getElementById('grandTotal');
quantity1.addEventListener('change', updateTotal);
quantity2.addEventListener('change', updateTotal);
function updateTotal() {
var quantity1Value = parseInt(quantity1.value);
var quantity2Value = parseInt(quantity2.value);
var price1 = 2.99;
var price2 = 1.99;
total1.innerHTML = '$' + (quantity1Value * price1).toFixed(2); total2.innerHTML = '$' + (quantity2Value * price2).toFixed(2); grandTotal.innerHTML = '$' + ((quantity1Value * price1) + (quantity2Value * price2)).toFixed(2);
}
</script>
</body>
</html>
```
这个购物车案例展示了两个商品（苹果和橙子）以及对应的价
格和数量。
每个商品数量的变化都触发了一个`updateTotal`函数来更新商品的总价和购物车的总价。
在页面上，每个商品的数量输入控件使用了`<input>`标签，并且为`change`事件添加了一个监听器。
购物车的总价是通过计算各个商品总价的和得来的，并且使用了`toFixed`函数来保留两位小数。
在该案例中，购物车的总价会实时更新。