当前位置：首页 > news >正文

HTML和JavaScript实现商品购物系统

news 2025/7/21 16:01:56

下面是一个更全面的商品购物系统示例，包含新增商品、商品的增加删除以及结算找零的功能。这个系统使用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>