html➕css➕js实现购物车

HTML、CSS和JavaScript三者结合起来可以构建一个基本的购物车功能。下面是一个简单的概述：

1. **HTML** (HyperText Markup Language): 用于结构化网页内容。创建一个表格或者列表，其中包含商品名称、图片、价格和“添加到购物车”按钮。每个商品项可以作为一个`<div>`或者其他容器元素。

<div class="product">
    <img src="product-image.jpg" alt="Product Image">
    <h3>产品名称</h3>
    <p>价格</p>
    <button id="add-to-cart">加入购物车</button>
</div>

2. **CSS**: 用于美化页面样式，包括布局、颜色和字体等。设置购物车按钮的样式，以及当鼠标悬停或点击时的交互效果。

.product {
    /* 样式规则 */
}

#add-to-cart {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
}
.product:hover #add-to-cart {
    cursor: pointer;
}

3. **JavaScript**: 实现购物车的功能。通过事件监听器处理“添加到购物车”按钮的点击事件。你可以创建一个数组或对象来存储选中的商品信息，并考虑如何显示总价格、清空购物车等功能。

// 获取所有商品按钮
const addToCartButtons = document.querySelectorAll('.add-to-cart');

// 点击事件处理器
addToCartButtons.forEach(button => {
    button.addEventListener('click', function() {
        // 获取当前商品信息
        const product = ...; // 根据HTML获取商品数据

        // 添加到购物车逻辑，如更新全局变量或数组
        addTo ShoppingCart(product);

        // 显示提示信息或更新UI
        alert("已将商品添加到购物车");
    });
});