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

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

案例需求

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

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

HTML结构

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态购物车</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="container"><h1>在线商店</h1><div class="product-list"><div class="product" data-id="1" data-price="50"><h2>商品A</h2><p>价格：$50</p><button class="add-to-cart">添加到购物车</button></div><div class="product" data-id="2" data-price="100"><h2>商品B</h2><p>价格：$100</p><button class="add-to-cart">添加到购物车</button></div><div class="product" data-id="3" data-price="150"><h2>商品C</h2><p>价格：$150</p><button class="add-to-cart">添加到购物车</button></div></div><div class="shopping-cart"><h2>购物车</h2><ul id="cart-items"></ul><p id="total-price">总金额：$0</p><button id="checkout">结算</button></div></div><script src="script.js"></script>
</body>
</html>

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，我们实现动态交互功能。

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();});});// 更新购物车UIfunction 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}<button class="remove-item" data-id="${item.id}">移除</button>`;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();});
});