JavaScript网页设计案例：响应式动态购物车

       在现代网页开发中，购物车是电子商务网站的重要功能之一。通过JavaScript，我们可以实现一个响应式动态购物车，提供用户友好的体验，并展示前端开发的核心能力。

---

案例需求

我们的购物车需要实现以下功能：

1. 动态添加商品：用户可以从商品列表中选择并添加商品到购物车。
2. 实时更新：购物车的商品数量、价格和总金额自动更新。
3. 修改商品数量：用户可以调整购物车中商品的数量。
4. 移除商品：用户可以从购物车中移除商品。
5. 结算功能：显示总金额并模拟提交订单。

---

HTML结构

首先，我们构建基本的HTML页面结构，包含商品展示区和购物车。

    
    
    
    


    

        
在线商店
        

            

                
商品A
                
价格：$50
                添加到购物车
            
            

                
商品B
                
价格：$100
                添加到购物车
            
            

                
商品C
                
价格：$150
                添加到购物车
            
        
        

            
购物车
            

            
总金额：$0
            结算
        
    
    

---

CSS样式

设计一个简洁的样式，使页面布局清晰且美观。

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 20px;
}

.product-list, .shopping-cart {
    width: 50%;
}

.product {
    background: #f1f1f1;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

#cart-items {
    list-style: none;
    padding: 0;
}

#cart-items li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

#total-price {
    font-size: 18px;
    font-weight: bold;
}

---

JavaScript功能实现

通过JavaScript，我们实现动态交互功能。

document.addEventListener('DOMContentLoaded', () => {
    const cartItems = document.getElementById('cart-items');
    const totalPrice = document.getElementById('total-price');
    const checkoutButton = document.getElementById('checkout');
    const addToCartButtons = document.querySelectorAll('.add-to-cart');

    let cart = [];

    // 添加商品到购物车
    addToCartButtons.forEach(button => {
        button.addEventListener('click', () => {
            const productElement = button.parentElement;
            const productId = productElement.getAttribute('data-id');
            const productName = productElement.querySelector('h2').textContent;
            const productPrice = parseFloat(productElement.getAttribute('data-price'));

            const existingProduct = cart.find(item => item.id === productId);

            if (existingProduct) {
                existingProduct.quantity += 1;
            } else {
                cart.push({ id: productId, name: productName, price: productPrice, quantity: 1 });
            }

            updateCartUI();
        });
    });

    // 更新购物车UI
    function updateCartUI() {
        cartItems.innerHTML = '';
        let total = 0;

        cart.forEach(item => {
            total += item.price * item.quantity;

            const cartItem = document.createElement('li');
            cartItem.innerHTML = `${item.name} - $${item.price} x ${item.quantity}
                移除`;

            cartItems.appendChild(cartItem);

            // 移除商品
            cartItem.querySelector('.remove-item').addEventListener('click', () => {
                cart = cart.filter(cartItem => cartItem.id !== item.id);
                updateCartUI();
            });
        });

        totalPrice.textContent = `总金额：$${total.toFixed(2)}`;
    }

    // 模拟结算
    checkoutButton.addEventListener('click', () => {
        if (cart.length === 0) {
            alert('购物车为空！');
            return;
        }

        alert(`订单已提交！总金额：$${cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2)}`);
        cart = [];
        updateCartUI();
    });
});

---

功能演示

1. 商品添加：点击“添加到购物车”，商品立即显示在购物车列表中。
2. 实时更新：购物车总金额自动更新，无需刷新页面。
3. 数量修改：添加相同商品会增加数量。
4. 商品移除：点击“移除”按钮即可删除商品。
5. 订单提交：点击“结算”按钮，模拟提交订单。

---

总结

通过本案例，你学习了如何使用HTML、CSS和JavaScript构建一个功能完整的动态购物车。这个案例不仅展示了前端开发的基本技能，还可以作为更复杂的电子商务项目的起点。