HTML5淘寶購物車代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淘寶購物車</title> <style> /* CSS樣式 */ </style> <script> /* JavaScript代碼 */ </script> </head> <body> <div id="cart"> <!-- 購物車內容 --> </div> <footer> <button id="clear-cart">清空購物車</button> <button id="checkout">結算</button> </footer> </body> </html>
以上是基本的HTML骨架代碼，其中購物車內容的部分可以使用JavaScript動態生成。
var cart = [
{
name: "商品1",
price: 10.99,
quantity: 3
},
{
name: "商品2",
price: 5.99,
quantity: 2
},
// 其他商品
];
function generateCartHTML(cart) {
var cartHTML = "";
for (var i = 0; i < cart.length; i++) {
cartHTML += "<div class='cart-item'>" +
"<span class='item-name'>" + cart[i].name + "</span>" +
"<span class='item-quantity'>" + cart[i].quantity + "</span>" +
"<span class='item-price'>" + cart[i].price.toFixed(2) + "</span>" +
"<button class='remove-item' data-index='" + i + "'>刪除</button>" +
"</div>";
}
return cartHTML;
}
document.getElementById("cart").innerHTML = generateCartHTML(cart);
var removeButtons = document.getElementsByClassName("remove-item");
for (var i = 0; i < removeButtons.length; i++) {
removeButtons[i].addEventListener("click", function() {
var index = this.getAttribute("data-index");
cart.splice(index, 1);
document.getElementById("cart").innerHTML = generateCartHTML(cart);
});
}
document.getElementById("clear-cart").addEventListener("click", function() {
cart = [];
document.getElementById("cart").innerHTML = "";
});
document.getElementById("checkout").addEventListener("click", function() {
// 執行結算邏輯
});以上JavaScript代碼使用了一個cart數組來存放購物車中的商品信息，然后使用generateCartHTML函數將其動態生成為HTML。之后給每個刪除按鈕添加點擊事件，使其可以刪除相應的商品，清空購物車和結算則分別使用了一個清空數組和一個結算邏輯，具體結算邏輯需要根據實際情況編寫。
上一篇qml css3.0