HTML5实现的移动端购物车自动结算功能示例代码

HTML5移动端购物车自动结算功能
我将设计一个简洁实用的移动端购物车页面，具有自动结算功能。用户添加/移除商品或修改数量时，总价会自动实时计算。
设计思路

移动端友好的响应式设计
清晰的商品列表，包括图片、名称、价格和数量控件
自动实时计算小计、运费和总价
商品数量增减和删除功能
简洁美观的UI，适合移动设备使用
下面是完整实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>移动端购物车 - 自动结算</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding-bottom: 80px;
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
        }

        header {
            background-color: #ff6b6b;
            color: white;
            padding: 15px 20px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 10;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        header h1 {
            font-size: 1.5rem;
            font-weight: 600;
        }

        header p {
            font-size: 0.9rem;
            opacity: 0.9;
            margin-top: 5px;
        }

        .cart-items {
            padding: 15px;
        }

        .cart-item {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .cart-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .item-image {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .item-details {
            flex-grow: 1;
        }

        .item-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        .item-price {
            color: #ff6b6b;
            font-weight: 700;
            font-size: 1.2rem;
        }

        .item-controls {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .quantity-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #f0f0f0;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: #555;
            cursor: pointer;
        }

        .quantity {
            margin: 0 12px;
            font-weight: 600;
            min-width: 25px;
            text-align: center;
        }

        .remove-btn {
            margin-left: auto;
            background: none;
            border: none;
            color: #999;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 5px;
        }

        .empty-cart {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }

        .empty-cart i {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .empty-cart p {
            font-size: 1.1rem;
        }

        .checkout-section {
            background-color: white;
            border-radius: 15px 15px 0 0;
            padding: 20px;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
        }

        .price-details {
            margin-bottom: 20px;
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .price-row.total {
            font-weight: 700;
            font-size: 1.3rem;
            color: #ff6b6b;
            border-bottom: none;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #ddd;
        }

        .checkout-btn {
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 16px;
            font-size: 1.2rem;
            font-weight: 600;
            width: 100%;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .checkout-btn:hover {
            background-color: #ff5252;
        }

        .checkout-btn i {
            margin-right: 10px;
        }

        .notification {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 12px 25px;
            border-radius: 25px;
            font-size: 0.9rem;
            z-index: 100;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .notification.show {
            opacity: 1;
        }

        .item-original-price {
            color: #999;
            text-decoration: line-through;
            font-size: 0.9rem;
            margin-left: 5px;
        }

        @media (max-width: 480px) {
            .item-image {
                width: 70px;
                height: 70px;
            }

            .item-name {
                font-size: 1rem;
            }

            .item-price {
                font-size: 1.1rem;
            }
        }

        .discount {
            color: #4CAF50;
            font-size: 0.9rem;
            font-weight: 600;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-shopping-cart"></i> 我的购物车</h1>
            <p>添加、移除商品或修改数量，总价将自动计算</p>
        </header>

        <div class="cart-items" id="cartItems">
            <!-- 购物车商品会通过JavaScript动态生成 -->
        </div>

        <div class="checkout-section">
            <div class="price-details">
                <div class="price-row">
                    <span>商品小计</span>
                    <span id="subtotal">¥0.00</span>
                </div>
                <div class="price-row">
                    <span>运费</span>
                    <span id="shipping">¥0.00</span>
                </div>
                <div class="price-row">
                    <span>优惠</span>
                    <span id="discount">-¥0.00</span>
                </div>
                <div class="price-row total">
                    <span>总计</span>
                    <span id="total">¥0.00</span>
                </div>
            </div>

            <button class="checkout-btn" id="checkoutBtn">
                <i class="fas fa-credit-card"></i> 去结算 (<span id="itemCount">0</span>件商品)
            </button>
        </div>

        <div class="notification" id="notification">商品已添加到购物车</div>
    </div>

    <script>
        // 商品数据
        const products = [
            {
                id: 1,
                name: "无线蓝牙耳机",
                price: 299.00,
                originalPrice: 399.00,
                image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
                quantity: 1
            },
            {
                id: 2,
                name: "智能运动手表",
                price: 899.00,
                originalPrice: 999.00,
                image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
                quantity: 1
            },
            {
                id: 3,
                name: "便携式充电宝",
                price: 129.00,
                originalPrice: 169.00,
                image: "https://images.unsplash.com/photo-1594736797933-d0e64d1b0f1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
                quantity: 2
            },
            {
                id: 4,
                name: "智能手机支架",
                price: 45.00,
                originalPrice: 59.00,
                image: "https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
                quantity: 1
            }
        ];

        // 购物车状态
        let cart = [...products];

        // DOM元素
        const cartItemsEl = document.getElementById('cartItems');
        const subtotalEl = document.getElementById('subtotal');
        const shippingEl = document.getElementById('shipping');
        const discountEl = document.getElementById('discount');
        const totalEl = document.getElementById('total');
        const itemCountEl = document.getElementById('itemCount');
        const checkoutBtn = document.getElementById('checkoutBtn');
        const notificationEl = document.getElementById('notification');

        // 初始化购物车
        function initCart() {
            renderCart();
            updateSummary();
        }

        // 渲染购物车商品
        function renderCart() {
            if (cart.length === 0) {
                cartItemsEl.innerHTML = `
                    <div class="empty-cart">
                        <i class="fas fa-shopping-cart"></i>
                        <p>购物车是空的，快去添加商品吧！</p>
                    </div>
                `;
                return;
            }

            cartItemsEl.innerHTML = cart.map(item => `
                <div class="cart-item" data-id="${item.id}">
                    <div class="item-image">
                        <img src="${item.image}" alt="${item.name}">
                    </div>
                    <div class="item-details">
                        <div class="item-name">${item.name}</div>
                        <div>
                            <span class="item-price">¥${item.price.toFixed(2)}</span>
                            ${item.originalPrice ? `<span class="item-original-price">¥${item.originalPrice.toFixed(2)}</span>` : ''}
                            ${item.originalPrice ? `<span class="discount">(${Math.round((1 - item.price/item.originalPrice) * 100)}% off)</span>` : ''}
                        </div>
                        <div class="item-controls">
                            <button class="quantity-btn decrease" onclick="changeQuantity(${item.id}, -1)">
                                <i class="fas fa-minus"></i>
                            </button>
                            <span class="quantity">${item.quantity}</span>
                            <button class="quantity-btn increase" onclick="changeQuantity(${item.id}, 1)">
                                <i class="fas fa-plus"></i>
                            </button>
                            <button class="remove-btn" onclick="removeItem(${item.id})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 更新购物车商品数量
        function changeQuantity(productId, change) {
            const itemIndex = cart.findIndex(item => item.id === productId);

            if (itemIndex !== -1) {
                const newQuantity = cart[itemIndex].quantity + change;

                if (newQuantity < 1) {
                    removeItem(productId);
                    return;
                }

                cart[itemIndex].quantity = newQuantity;
                renderCart();
                updateSummary();
                showNotification(`更新了商品数量: ${newQuantity}`);
            }
        }

        // 从购物车移除商品
        function removeItem(productId) {
            const itemIndex = cart.findIndex(item => item.id === productId);

            if (itemIndex !== -1) {
                const itemName = cart[itemIndex].name;
                cart.splice(itemIndex, 1);
                renderCart();
                updateSummary();
                showNotification(`已移除: ${itemName}`);
            }
        }

        // 更新结算摘要
        function updateSummary() {
            // 计算商品小计
            let subtotal = 0;
            let totalItems = 0;

            cart.forEach(item => {
                subtotal += item.price * item.quantity;
                totalItems += item.quantity;
            });

            // 计算运费 (超过300元免运费)
            let shipping = subtotal > 300 || subtotal === 0 ? 0 : 15;

            // 计算折扣 (满500减50)
            let discount = subtotal >= 500 ? 50 : 0;

            // 计算总价
            let total = subtotal + shipping - discount;

            // 更新UI
            subtotalEl.textContent = `¥${subtotal.toFixed(2)}`;
            shippingEl.textContent = shipping > 0 ? `¥${shipping.toFixed(2)}` : '免运费';
            discountEl.textContent = discount > 0 ? `-¥${discount.toFixed(2)}` : '¥0.00';
            totalEl.textContent = `¥${total.toFixed(2)}`;
            itemCountEl.textContent = totalItems;

            // 更新结算按钮文本
            checkoutBtn.innerHTML = `<i class="fas fa-credit-card"></i> 去结算 (${totalItems}件商品)`;
        }

        // 显示通知
        function showNotification(message) {
            notificationEl.textContent = message;
            notificationEl.classList.add('show');

            setTimeout(() => {
                notificationEl.classList.remove('show');
            }, 2000);
        }

        // 模拟结算
        function checkout() {
            if (cart.length === 0) {
                showNotification("购物车是空的，请先添加商品");
                return;
            }

            const total = parseFloat(totalEl.textContent.replace('¥', ''));
            showNotification(`结算成功！总金额: ¥${total.toFixed(2)}`);

            // 清空购物车
            cart = [];
            renderCart();
            updateSummary();
        }

        // 添加示例商品到购物车
        function addSampleProduct() {
            const newProduct = {
                id: Date.now(),
                name: "USB-C数据线",
                price: 29.00,
                originalPrice: 39.00,
                image: "https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
                quantity: 1
            };

            cart.push(newProduct);
            renderCart();
            updateSummary();
            showNotification(`已添加到购物车: ${newProduct.name}`);
        }

        // 绑定事件
        checkoutBtn.addEventListener('click', checkout);

        // 添加一个按钮用于演示添加商品
        document.addEventListener('DOMContentLoaded', () => {
            const header = document.querySelector('header');
            const addButton = document.createElement('button');
            addButton.innerHTML = '<i class="fas fa-plus"></i> 添加示例商品';
            addButton.style.cssText = `
                background-color: white;
                color: #ff6b6b;
                border: none;
                border-radius: 20px;
                padding: 8px 15px;
                margin-top: 10px;
                font-size: 0.9rem;
                font-weight: 600;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            `;
            addButton.addEventListener('click', addSampleProduct);
            addButton.addEventListener('mouseenter', function() {
                this.style.backgroundColor = '#f8f8f8';
            });
            addButton.addEventListener('mouseleave', function() {
                this.style.backgroundColor = 'white';
            });

            header.appendChild(addButton);

            // 初始化购物车
            initCart();
        });
    </script>
</body>
</html>