以下是一个简单的实现淘宝购物车的示例代码：
HTML:
云服务器
物理服务器
虚拟主机
跨境电商服务器<div id="cart">
<h2>购物车</h2>
<ul id="cart-items"></ul>
<button id="checkout-btn">结算</button>
</div>
<div id="product-list">
<h2>商品列表</h2>
<ul>
<li>
<span>商品1</span>
<button class="add-to-cart">加入购物车</button>
</li>
<li>
<span>商品2</span>
<button class="add-to-cart">加入购物车</button>
</li>
<li>
<span>商品3</span>
<button class="add-to-cart">加入购物车</button>
</li>
</ul>
</div>
JavaScript:
// 获取购物车和商品列表
const cart = document.getElementById('cart-items');
const productList = document.getElementById('product-list');
// 定义购物车数据
let cartItems = [];
// 加入购物车事件处理函数
function addToCart(event) {
const product = event.target.previousElementSibling.textContent;
const item = { name: product };
cartItems.push(item);
renderCart();
}
// 结算事件处理函数
function checkout() {
// 清空购物车
cartItems = [];
renderCart();
alert('结算成功！');
}
// 渲染购物车
function renderCart() {
cart.innerHTML = '';
cartItems.forEach(item => {
const li = document.createElement('li');
li.textContent = item.name;
cart.appendChild(li);
});
}
// 添加加入购物车按钮点击事件监听器
const addToCartButtons = document.querySelectorAll('.add-to-cart');
addToCartButtons.forEach(btn => {
btn.addEventListener('click', addToCart);
});
// 添加结算按钮点击事件监听器
const checkoutBtn = document.getElementById('checkout-btn');
checkoutBtn.addEventListener('click', checkout);
此示例中，通过JavaScript实现了以下功能：
renderCart 函数将购物车数据渲染到页面中。请注意，此示例只是一个简单的实现，还有很多细节和功能可以进行优化和扩展。
辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
推荐阅读： JS生成随机数的方法有哪些