HTML和JavaScript实现商品购物系统

news2025/2/23 16:27:15

下面是一个更全面的商品购物系统示例，包含新增商品、商品的增加删除以及结算找零的功能。这个系统使用HTML和JavaScript实现。

1.功能说明：

这个应用程序使用纯HTML和JavaScript实现。

包含一个商品列表和一个购物车区域。
商品列表中有几个示例商品，每个商品都有一个“加入购物车”按钮。
点击“加入购物车”按钮后，商品会被添加到购物车中，并更新购物车显示。
购物车中列出了所有已添加的商品，并计算总价。
每个购物车项都有一个“移除”按钮，可以移除该商品。
结算部分包含一个支付金额输入框和一个结算按钮。
输入支付金额后点击结算按钮，会计算找零并弹出提示框显示结算信息，然后清空购物车。
新增商品部分包含输入框用于输入新的商品名称和价格，以及一个“新增商品”按钮。
点击“新增商品”按钮后，新的商品会被添加到商品列表中。

2.代码展示

<!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;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }
        .container {
            display: flex;
            justify-content: space-between;
        }
        .product-list, .cart {
            width: 45%;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }
        .product-item, .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .product-item:last-child, .cart-item:last-child {
            border-bottom: none;
        }
        .product-item button, .cart-item button {
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .product-item button:hover, .cart-item button:hover {
            background-color: #0056b3;
        }
        .total {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
        }
        .checkout-section {
            margin-top: 20px;
        }
        .checkout-section input[type="number"] {
            width: 100px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
        }
        .checkout-section button {
            padding: 5px 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .checkout-section button:hover {
            background-color: #218838;
        }
        .add-product-section {
            margin-top: 20px;
        }
        .add-product-section input[type="text"], .add-product-section input[type="number"] {
            width: 150px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
        }
        .add-product-section button {
            padding: 5px 10px;
            background-color: #ffc107;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .add-product-section button:hover {
            background-color: #e0a800;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="product-list">
            <h1>商品列表</h1>
            <div id="product-items"></div>
            <div class="add-product-section">
                <input type="text" id="new-product-name" placeholder="商品名称" required>
                <input type="number" id="new-product-price" placeholder="价格" min="0" step="any" required>
                <button onclick="addNewProduct()">新增商品</button>
            </div>
        </div>

        <div class="cart">
            <h1>购物车</h1>
            <div id="cart-items"></div>
            <div class="total" id="total-price">总价: ¥0.00</div>
            <div class="checkout-section">
                <input type="number" id="payment" placeholder="支付金额" min="0" step="any" required>
                <button onclick="checkout()">结算</button>
            </div>
        </div>
    </div>

    <script>
        let products = [
            { name: '苹果', price: 5 },
            { name: '香蕉', price: 3 },
            { name: '橙子', price: 4 }
        ];
        let cart = [];

        function updateProductList() {
            const productItemsDiv = document.getElementById('product-items');
            productItemsDiv.innerHTML = '';

            products.forEach((product, index) => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'product-item';
                itemDiv.innerHTML = `
                    <span>${product.name}</span>
                    <span>¥${product.price.toFixed(2)}</span>
                    <button οnclick="addToCart('${product.name}', ${product.price})">加入购物车</button>
                `;
                productItemsDiv.appendChild(itemDiv);
            });
        }

        function addToCart(name, price) {
            const item = { name, price };
            cart.push(item);
            updateCartDisplay();
        }

        function updateCartDisplay() {
            const cartItemsDiv = document.getElementById('cart-items');
            cartItemsDiv.innerHTML = '';
            let totalPrice = 0;

            cart.forEach((item, index) => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'cart-item';
                itemDiv.innerHTML = `
                    <span>${item.name}</span>
                    <span>¥${item.price.toFixed(2)}</span>
                    <button οnclick="removeFromCart(${index})">移除</button>
                `;
                cartItemsDiv.appendChild(itemDiv);
                totalPrice += item.price;
            });

            document.getElementById('total-price').textContent = `总价: ¥${totalPrice.toFixed(2)}`;
        }

        function removeFromCart(index) {
            cart.splice(index, 1);
            updateCartDisplay();
        }

        function checkout() {
            if (cart.length === 0) {
                alert('购物车为空，请先添加商品！');
                return;
            }

            const payment = parseFloat(document.getElementById('payment').value);
            const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);

            if (isNaN(payment) || payment < totalPrice) {
                alert('支付金额不足，请重新输入！');
                return;
            }

            const change = payment - totalPrice;
            alert(`结算成功！总价: ¥${totalPrice.toFixed(2)}\n支付金额: ¥${payment.toFixed(2)}\n找零: ¥${change.toFixed(2)}`);
            cart = [];
            updateCartDisplay();
            document.getElementById('payment').value = '';
        }

        function addNewProduct() {
            const newName = document.getElementById('new-product-name').value.trim();
            const newPrice = parseFloat(document.getElementById('new-product-price').value);

            if (!newName || isNaN(newPrice) || newPrice <= 0) {
                alert('请输入有效的商品名称和价格！');
                return;
            }

            products.push({ name: newName, price: newPrice });
            updateProductList();
            document.getElementById('new-product-name').value = '';
            document.getElementById('new-product-price').value = '';
            alert(`商品 "${newName}" 已成功添加`);
        }

        // 初始化商品列表
        updateProductList();
    </script>
</body>
</html>