下面给你一个 HTML5 + 原生 JavaScript 实现的 移动端购物车自动结算功能示例代码，结构清晰、可直接复制运行，支持：

  • 数量加减
  • 自动计算商品小计
  • 自动更新总价
  • 删除商品
  • 移动端自适应（简单样式）

✔️ HTML5 实现移动端购物车自动结算 — 完整示例

下面是可以直接运行的 完整代码示例（HTML/CSS/JS 一体）。

📌 效果说明

  • 点击 + － 按钮自动更新金额
  • 修改数量输入框也会自动更新
  • 可删除商品
  • 总价实时刷新

⭐ 完整代码示例 (可直接复制运行)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端购物车</title>

<style>
    body {
        font-family: Arial, sans-serif;
        padding: 10px;
        background: #f5f5f5;
    }
    .cart-item {
        display: flex;
        padding: 10px;
        background: #fff;
        margin-bottom: 10px;
        border-radius: 8px;
        align-items: center;
    }
    .cart-item img {
        width: 80px;
        height: 80px;
        border-radius: 6px;
        margin-right: 10px;
        flex-shrink: 0;
        object-fit: cover;
    }
    .info { flex: 1; }
    .title { font-size: 15px; margin-bottom: 5px; }
    .price { color: #e4393c; font-weight: bold; margin-bottom: 5px; }

    .qty-box {
        display: flex;
        align-items: center;
    }
    .qty-box button {
        width: 30px;
        height: 30px;
        border: none;
        background: #ddd;
        font-size: 18px;
        border-radius: 4px;
    }
    .qty-box input {
        width: 40px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 0 5px;
        height: 28px;
        border-radius: 4px;
    }
    .delete {
        color: #999;
        font-size: 14px;
        margin-left: 10px;
    }

    .total {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 12px;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .total-price {
        font-size: 18px;
        color: #e4393c;
        font-weight: bold;
    }
    .pay-btn {
        background: #ff5722;
        color: #fff;
        padding: 10px 18px;
        border-radius: 6px;
    }
</style>
</head>

<body>

<h2>购物车</h2>

<div id="cart-list">

    <div class="cart-item" data-price="59.9">
        <img src="https://via.placeholder.com/80">
        <div class="info">
            <div class="title">夏季T恤</div>
            <div class="price">¥59.9</div>

            <div class="qty-box">
                <button class="minus">－</button>
                <input type="number" class="qty" value="1">
                <button class="plus">＋</button>
            </div>
        </div>
        <span class="delete">删除</span>
    </div>

    <div class="cart-item" data-price="120">
        <img src="https://via.placeholder.com/80">
        <div class="info">
            <div class="title">运动鞋</div>
            <div class="price">¥120</div>

            <div class="qty-box">
                <button class="minus">－</button>
                <input type="number" class="qty" value="1">
                <button class="plus">＋</button>
            </div>
        </div>
        <span class="delete">删除</span>
    </div>

</div>

<!-- 底部结算栏 -->
<div class="total">
    <span>合计：</span>
    <span class="total-price">¥0</span>
    <div class="pay-btn">去结算</div>
</div>


<script>
    function calcTotal() {
        let total = 0;
        document.querySelectorAll(".cart-item").forEach(item => {
            const price = parseFloat(item.dataset.price);
            const qty = parseInt(item.querySelector(".qty").value) || 0;
            total += price * qty;
        });
        document.querySelector(".total-price").innerText = "¥" + total.toFixed(2);
    }

    // 数量加减事件
    document.querySelectorAll(".cart-item").forEach(item => {
        const minus = item.querySelector(".minus");
        const plus = item.querySelector(".plus");
        const qtyInput = item.querySelector(".qty");

        minus.onclick = () => {
            let value = parseInt(qtyInput.value);
            if (value > 1) qtyInput.value = value - 1;
            calcTotal();
        };

        plus.onclick = () => {
            qtyInput.value = parseInt(qtyInput.value) + 1;
            calcTotal();
        };

        qtyInput.oninput = () => calcTotal();

        // 删除商品
        item.querySelector(".delete").onclick = () => {
            item.remove();
            calcTotal();
        };
    });

    // 初次计算
    calcTotal();
</script>

</body>
</html>