購物車是一個網站中非常重要的組件之一，可以幫助用戶方便地將他們想要購買的商品添加到購物車當中。在 HTML5 中，我們可以用以下代碼實現一個購物車的功能：
<div id="cart">
<h1>購物車</h1>
<ul id="cart-list"></ul>
<p>總價：<span id="total-price">0</span>元</p>
<button id="checkout-btn">結算</button>
</div>
<script>
var cartList = document.getElementById('cart-list');
var totalPrice = document.getElementById('total-price');
var cart = [];
function addToCart(item) {
cart.push(item);
renderCart();
}
function removeFromCart(index) {
cart.splice(index, 1);
renderCart();
}
function renderCart() {
cartList.innerHTML = '';
var total = 0;
for (var i = 0; i < cart.length; i++) {
var item = cart[i];
var li = document.createElement('li');
li.innerHTML = item.name + ' - ' + item.price + '元';
cartList.appendChild(li);
total += item.price;
}
totalPrice.innerHTML = total;
}
document.getElementById('checkout-btn').addEventListener('click', function() {
alert('結算成功！');
cart = [];
renderCart();
});
</script>上述代碼包含了一個名為 cart 的 div 元素，其中包含了一個 id 為 cart-list 的 ul 元素，以及顯示總價和結算按鈕的 p 元素。在 JavaScript 中，我們定義了一些函數用于操作購物車的邏輯，包括 addToCart（將商品添加到購物車中）、removeFromCart（從購物車中刪除商品）、renderCart（渲染購物車列表）等等。
我們可以給頁面中的某個元素添加 onclick 方法，當用戶點擊該元素時會自動觸發該方法。在上述代碼中，我們給刪除按鈕添加了 onclick 方法，當用戶點擊刪除按鈕時，系統會調用 removeFromCart 方法從購物車中刪除該商品，并重新渲染購物車列表。
最后，當用戶點擊結算按鈕時，系統會彈出一個提示框，告知用戶操作成功，同時清空購物車列表并重新渲染頁面。這樣，一個簡單的購物車功能就實現了。