技术文摘

JavaScript 实现简易购物车及添加商品功能的方法

2025-01-09 16:12:21 小编

JavaScript 实现简易购物车及添加商品功能的方法

在网页开发中，购物车功能是许多电商类或商品展示类网站的核心需求之一。通过 JavaScript 可以轻松实现一个简易购物车以及添加商品的功能。

搭建页面结构。HTML 部分创建一个商品列表区域和购物车展示区域。商品列表中的每个商品包含名称、价格和添加到购物车的按钮。购物车区域则用于显示已添加商品的信息以及总价。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易购物车</title>
</head>
<body>
    <div class="product-list">
        <div class="product">
            <h3>商品1</h3>
            <p>价格：100元</p>
            <button class="add-to-cart">添加到购物车</button>
        </div>
        <div class="product">
            <h3>商品2</h3>
            <p>价格：200元</p>
            <button class="add-to-cart">添加到购物车</button>
        </div>
    </div>
    <div class="cart">
        <h2>购物车</h2>
        <ul class="cart-items"></ul>
        <p>总价：<span id="total-price">0</span>元</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

接下来，使用 JavaScript 实现添加商品到购物车的逻辑。通过 document.querySelectorAll 方法获取所有的添加到购物车按钮，并为它们添加点击事件监听器。当按钮被点击时，获取商品的名称和价格，创建一个商品对象，并将其添加到购物车数组中。

const addToCartButtons = document.querySelectorAll('.add-to-cart');
const cartItemsList = document.querySelector('.cart-items');
const totalPriceElement = document.getElementById('total-price');

let cart = [];

addToCartButtons.forEach((button) => {
    button.addEventListener('click', () => {
        const productName = button.parentElement.querySelector('h3').textContent;
        const productPrice = parseFloat(button.parentElement.querySelector('p').textContent.split('：')[1].replace('元', ''));

        const product = { name: productName, price: productPrice };
        cart.push(product);

        updateCartDisplay();
    });
});

function updateCartDisplay() {
    cartItemsList.innerHTML = '';
    let totalPrice = 0;

    cart.forEach((item, index) => {
        const listItem = document.createElement('li');
        listItem.textContent = `${item.name} - ${item.price}元`;
        cartItemsList.appendChild(listItem);

        totalPrice += item.price;
    });

    totalPriceElement.textContent = totalPrice;
}

在上述代码中，updateCartDisplay 函数负责更新购物车的显示，遍历购物车数组，为每个商品创建一个列表项并添加到购物车展示区域，同时计算并更新总价。

通过以上步骤，利用 JavaScript 成功实现了一个简易购物车及添加商品的功能。这只是一个基础示例，实际应用中还可以进一步扩展，如实现删除商品、数量增减等功能，以满足更复杂的业务需求。

TAGS: 功能实现 JavaScript 简易购物车添加商品功能

万千站长工具

技术文摘

JavaScript 实现简易购物车及添加商品功能的方法

JavaScript 实现简易购物车及添加商品功能的方法

欢迎使用万千站长工具！