购物车案例

GH小杨

于 2025-03-11 21:44:34 发布

阅读量535

点赞数 9

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.csdn.net/gannimeiwent/article/details/146189970

购物车案例

html代码

<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 定义 HTML 文档的根元素，设置语言为英语 -->

<head>
    <!-- 文档的元数据部分，包含字符编码、视口设置、页面标题和外部 CSS 文件链接 -->
    <meta charset="UTF-8">
    <!-- 设置字符编码为 UTF - 8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置视口，使页面在不同设备上正确显示 -->
    <title>弹窗购物车</title>
    <!-- 设置页面标题 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 链接外部 CSS 文件 styles.css 用于样式设置 -->
</head>

<body>
    <!-- 文档的可见内容部分 -->
    <!-- 商品列表 -->
    <div class="product-list">
        <!-- 定义一个包含商品信息的容器 -->
        <div class="product" data-name="苹果" data-price="5">
            <!-- 单个商品的容器，使用 data - 属性存储商品名称和价格 -->
            <span>苹果</span>
            <!-- 显示商品名称 -->
            <span>￥5</span>
            <!-- 显示商品价格 -->
            <button onclick="addToCart(this)">加入购物车</button>
            <!-- 点击按钮调用 addToCart 函数，将商品添加到购物车 -->
        </div>
        <div class="product" data-name="香蕉" data-price="3">
            <!-- 另一个商品的容器 -->
            <span>香蕉</span>
            <!-- 显示商品名称 -->
            <span>￥3</span>
            <!-- 显示商品价格 -->
            <button onclick="addToCart(this)">加入购物车</button>
            <!-- 点击按钮调用 addToCart 函数 -->
        </div>
        <div class="product" data-name="橙子" data-price="4">
            <!-- 又一个商品的容器 -->
            <span>橙子</span>
            <!-- 显示商品名称 -->
            <span>￥4</span>
            <!-- 显示商品价格 -->
            <button onclick="addToCart(this)">加入购物车</button>
            <!-- 点击按钮调用 addToCart 函数 -->
        </div>
    </div>

    <!-- 购物车按钮 -->
    <button id="cart-button" onclick="openCart()">购物车</button>
    <!-- 点击按钮调用 openCart 函数，打开购物车弹窗 -->

    <!-- 购物车弹窗 -->
    <div id="cart-modal" class="modal">
        <!-- 购物车弹窗的容器，初始状态为隐藏 -->
        <div class="modal-content">
            <!-- 弹窗的内容容器 -->
            <span class="close" onclick="closeCart()">&times;</span>
            <!-- 关闭按钮，点击调用 closeCart 函数关闭弹窗 -->
            <h2>购物车</h2>
            <!-- 弹窗标题 -->
            <ul id="cart-items"></ul>
            <!-- 用于显示购物车中商品列表的无序列表 -->
            <p>总计: <span id="total-price">￥0</span></p>
            <!-- 显示购物车中商品的总价 -->
            <button onclick="checkout()">结算</button>
            <!-- 点击按钮调用 checkout 函数进行结算 -->
        </div>
    </div>

    <script src="./js/script.js"></script>
    <!-- 引入外部 JavaScript 文件 script.js -->
</body>

</html>

css代码

/* 商品列表样式 */
.product-list {
    margin-bottom: 20px;
    /* 设置商品列表容器底部外边距为 20px */
}

.product {
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐子元素 */
    margin-bottom: 10px;
    /* 设置单个商品容器底部外边距为 10px */
}

.product span {
    margin-right: 10px;
    /* 设置商品名称和价格的右边外边距为 10px */
}

/* 购物车按钮样式 */
#cart-button {
    padding: 10px 20px;
    /* 设置按钮内边距为上下 10px，左右 20px */
    background-color: #007BFF;
    /* 设置按钮背景颜色为蓝色 */
    color: white;
    /* 设置按钮文字颜色为白色 */
    border: none;
    /* 去除按钮边框 */
    cursor: pointer;
    /* 设置鼠标悬停时为手型 */
}

/* 模态框样式 */
.modal {
    display: none;
    /* 初始状态下模态框隐藏 */
    position: fixed;
    /* 固定定位，相对于浏览器窗口 */
    z-index: 1;
    /* 设置元素的堆叠顺序 */
    left: 0;
    /* 模态框左边缘与窗口左边缘对齐 */
    top: 0;
    /* 模态框上边缘与窗口上边缘对齐 */
    width: 100%;
    /* 模态框宽度为窗口宽度 */
    height: 100%;
    /* 模态框高度为窗口高度 */
    overflow: auto;
    /* 当内容溢出时显示滚动条 */
    background-color: rgba(0, 0, 0, 0.4);
    /* 模态框背景为半透明黑色 */
}

.modal-content {
    background-color: #fefefe;
    /* 模态框内容背景颜色为白色 */
    margin: 15% auto;
    /* 模态框内容上下外边距为窗口高度的 15%，左右居中 */
    padding: 20px;
    /* 模态框内容内边距为 20px */
    border: 1px solid #888;
    /* 模态框内容边框为 1px 灰色边框 */
    width: 80%;
    /* 模态框内容宽度为窗口宽度的 80% */
    max-width: 500px;
    /* 模态框内容最大宽度为 500px */
}

.close {
    color: #aaa;
    /* 关闭按钮文字颜色为灰色 */
    float: right;
    /* 关闭按钮靠右浮动 */
    font-size: 28px;
    /* 关闭按钮文字大小为 28px */
    font-weight: bold;
    /* 关闭按钮文字加粗 */
}

.close:hover,
.close:focus {
    color: black;
    /* 鼠标悬停或聚焦时关闭按钮文字颜色变为黑色 */
    text-decoration: none;
    /* 去除文字下划线 */
    cursor: pointer;
    /* 鼠标悬停时为手型 */
}

js代码

// 购物车数组，用于存储购物车中的商品信息
let cart = [];

// 加入购物车函数
function addToCart(button) {
    // 获取点击按钮所在的商品容器
    const product = button.parentNode;
    // 从商品容器的 data - name 属性中获取商品名称
    const name = product.dataset.name;
    // 从商品容器的 data - price 属性中获取商品价格，并转换为浮点数
    const price = parseFloat(product.dataset.price);

    // 检查商品是否已在购物车中
    const existingItem = cart.find(item => item.name === name);
    if (existingItem) {
        // 如果商品已在购物车中，增加其数量
        existingItem.quantity++;
    } else {
        // 如果商品不在购物车中，将其添加到购物车数组
        cart.push({ name, price, quantity: 1 });
    }

    // 调用 updateCart 函数更新购物车显示
    updateCart();
}

// 打开购物车弹窗
function openCart() {
    // 获取购物车弹窗元素
    const modal = document.getElementById('cart-modal');
    // 设置弹窗显示
    modal.style.display = 'block';
    // 调用 updateCart 函数更新购物车显示
    updateCart();
}

// 关闭购物车弹窗
function closeCart() {
    // 获取购物车弹窗元素
    const modal = document.getElementById('cart-modal');
    // 设置弹窗隐藏
    modal.style.display = 'none';
}

// 更新购物车内容
function updateCart() {
    // 获取购物车商品列表元素
    const cartItems = document.getElementById('cart-items');
    // 获取购物车总价元素
    const totalPrice = document.getElementById('total-price');

    // 清空购物车列表
    cartItems.innerHTML = '';

    let total = 0;
    // 遍历购物车数组
    cart.forEach(item => {
        // 创建一个列表项元素
        const li = document.createElement('li');
        // 设置列表项的文本内容，显示商品名称、数量和总价
        li.textContent = `${item.name} x ${item.quantity} = ￥${(item.price * item.quantity).toFixed(2)}`;
        // 将列表项添加到购物车商品列表中
        cartItems.appendChild(li);
        // 累加商品总价
        total += item.price * item.quantity;
    });

    // 更新购物车总价显示
    totalPrice.textContent = `￥${total.toFixed(2)}`;
}

// 结算函数
function checkout() {
    // 弹出结算成功提示框，显示总价
    alert(`结算成功！总计: ￥${document.getElementById('total-price').textContent.slice(1)}`);
    // 清空购物车数组
    cart = [];
    // 调用 updateCart 函数更新购物车显示
    updateCart();
    // 调用 closeCart 函数关闭购物车弹窗
    closeCart();
}

// 点击模态框外部关闭弹窗
window.onclick = function (event) {
    // 获取购物车弹窗元素
    const modal = document.getElementById('cart-modal');
    if (event.target == modal) {
        // 如果点击的是模态框本身，调用 closeCart 函数关闭弹窗
        closeCart();
    }
}