html购物车完整代码：HTML购物车完整代码实现

来源：网络作者：日期：2025-11-04 08:09:26

HTML购物车完整代码实现：从设计到功能实现

在现代电子商务网站中,购物车功能是用户体验的核心部分，本文将详细介绍如何使用纯HTML、CSS和JavaScript实现一个完整的购物车功能，包括商品添加、数量调整、价格计算和删除等核心功能。

购物车设计思路

购物车通常需要实现以下功能：

显示商品列表,包括商品图片、名称、价格、数量等信息
允许用户增加或减少商品数量,或者删除商品
计算购物车中商品的总价
提供清空购物车的功能

HTML结构

我们构建购物车的基本HTML结构,我们将使用无序列表(ul)来展示商品，每个商品项(li)包含商品信息和操作按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">购物车示例</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <h1>购物车</h1>
    <div id="cart">
        <ul id="cart-items">
            <!-- 商品项将通过JavaScript动态添加 -->
        </ul>
        <div id="cart-total">
            总计: <span id="total-price">0.00</span> 元
        </div>
        <button id="clear-cart">清空购物车</button>
    </div>
    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

CSS样式

我们为购物车添加一些基本的样式,使其看起来更美观。

#cart {
    width: 80%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}
#cart-items {
    list-style: none;
    padding: 0;
}
#cart-items li {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
#cart-items li img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
#cart-items li button {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 5px 10px;
    cursor: pointer;
}
#cart-items li button:hover {
    background-color: #eee;
}
#cart-total {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}
#clear-cart {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    cursor: pointer;
}
#clear-cart:hover {
    background-color: #ff0000;
}

JavaScript实现

我们使用JavaScript来实现购物车的动态功能,我们将创建一个数组来存储购物车中的商品，每个商品是一个对象，包含id、name、price和quantity属性。

// 商品数据
const products = [
    { id: 1, name: "商品1", price: 10.00 },
    { id: 2, name: "商品2", price: 20.00 },
    { id: 3, name: "商品3", price: 30.00 }
];
// 购物车数组
let cart = [];
// 显示购物车商品
function renderCart() {
    const cartItems = document.getElementById('cart-items');
    cartItems.innerHTML = '';
    cart.forEach(item => {
        const li = document.createElement('li');
        li.innerHTML = `
            <img src="https://via.placeholder.com/50" alt="${item.name}">
            <span>${item.name}</span>
            <span>单价: ${item.price.toFixed(2)} 元</span>
            <span>数量: <input type="number" min="1" value="${item.quantity}" class="quantity-input"></span>
            <button class="update-quantity" data-id="${item.id}">更新</button>
            <button class="remove-item" data-id="${item.id}">删除</button>
        `;
        cartItems.appendChild(li);
    });
    // 更新总价
    updateTotalPrice();
}
// 更新总价
function updateTotalPrice() {
    const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    document.getElementById('total-price').textContent = totalPrice.toFixed(2);
}
// 添加商品到购物车
function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    if (!product) return;
    const existingItem = cart.find(item => item.id === productId);
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        cart.push({ ...product, quantity: 1 });
    }
    renderCart();
}
// 从购物车中删除商品
function removeFromCart(productId) {
    cart = cart.filter(item => item.id !== productId);
    renderCart();
}
// 更新商品数量
function updateQuantity(productId, newQuantity) {
    const item = cart.find(item => item.id === productId);
    if (!item) return;
    item.quantity = newQuantity;
    renderCart();
}
// 清空购物车
function clearCart() {
    cart = [];
    renderCart();
}
// 初始化购物车
document.addEventListener('DOMContentLoaded', () => {
    // 添加商品到购物车的按钮（假设页面上有添加按钮，这里简化处理）
    // 实际应用中，需要为每个商品添加按钮绑定事件
    // 这里我们通过事件委托来处理购物车内的按钮事件
    document.getElementById('cart').addEventListener('click', (e) => {
        if (e.target.classList.contains('remove-item')) {
            const id = parseInt(e.target.getAttribute('data-id'));
            removeFromCart(id);
        } else if (e.target.classList.contains('update-quantity')) {
            const id = parseInt(e.target.getAttribute('data-id'));
            const input = e.target.parentElement.querySelector('.quantity-input');
            const newQuantity = parseInt(input.value);
            updateQuantity(id, newQuantity);
        } else if (e.target.id === 'clear-cart') {
            clearCart();
        }
    });
    // 示例：添加商品到购物车
    // 这里我们假设页面上有添加按钮，但为了演示，我们直接调用addToCart
    // 实际应用中，需要为每个商品的添加按钮绑定事件
    // document.getElementById('add-to-cart-1').addEventListener('click', () => addToCart(1));
});