当前位置：首页 > article >正文

JavaScript网页设计案例：打造动态与交互性并存的用户体验

article 2025/3/11 10:34:21

JavaScript网页设计案例：打造动态与交互性并存的用户体验

在现代网页设计中，JavaScript 扮演着至关重要的角色。它不仅能够增强页面的动态效果，还能为用户提供丰富的交互体验。本文将通过一个具体的案例，展示如何利用 JavaScript 打造一个功能强大且用户友好的网页。

案例背景：在线购物车系统

假设我们正在设计一个简单的在线购物网站，用户可以在页面上浏览商品、添加到购物车，并实时查看购物车中的商品总价。我们的目标是使用 JavaScript 实现以下功能：

动态添加商品到购物车
实时更新购物车总价
删除购物车中的商品
提供友好的用户反馈

实现步骤

1. HTML 结构设计

首先，我们创建一个简单的 HTML 页面，包含商品列表和购物车区域。

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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>商品列表</h1>
        <ul id="product-list">
            <li data-id="1" data-price="100">商品A - ¥100 <button class="add-to-cart">加入购物车</button></li>
            <li data-id="2" data-price="200">商品B - ¥200 <button class="add-to-cart">加入购物车</button></li>
            <li data-id="3" data-price="300">商品C - ¥300 <button class="add-to-cart">加入购物车</button></li>
        </ul>

        <h2>购物车</h2>
        <ul id="cart">
            <!-- 购物车商品将动态显示在这里 -->
        </ul>
        <p>总价: ¥<span id="total-price">0</span></p>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS 样式设计

为了让页面更美观，我们添加一些简单的 CSS 样式。

css

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

3. JavaScript 功能实现

接下来，我们使用 JavaScript 实现购物车的核心功能。

javascript

// 初始化购物车和总价
let cart = [];
let totalPrice = 0;

// 获取 DOM 元素
const productList = document.getElementById('product-list');
const cartList = document.getElementById('cart');
const totalPriceElement = document.getElementById('total-price');

// 添加商品到购物车
productList.addEventListener('click', (event) => {
    if (event.target.classList.contains('add-to-cart')) {
        const productItem = event.target.parentElement;
        const productId = productItem.getAttribute('data-id');
        const productPrice = parseFloat(productItem.getAttribute('data-price'));

        // 检查商品是否已在购物车中
        const existingItem = cart.find(item => item.id === productId);
        if (existingItem) {
            existingItem.quantity += 1;
        } else {
            cart.push({ id: productId, price: productPrice, quantity: 1 });
        }

        // 更新总价
        totalPrice += productPrice;
        updateCartDisplay();
    }
});

// 删除购物车中的商品
cartList.addEventListener('click', (event) => {
    if (event.target.classList.contains('remove-from-cart')) {
        const cartItem = event.target.parentElement;
        const productId = cartItem.getAttribute('data-id');

        // 找到商品并更新总价
        const itemIndex = cart.findIndex(item => item.id === productId);
        if (itemIndex !== -1) {
            totalPrice -= cart[itemIndex].price * cart[itemIndex].quantity;
            cart.splice(itemIndex, 1);
            updateCartDisplay();
        }
    }
});

// 更新购物车显示
function updateCartDisplay() {
    cartList.innerHTML = '';
    cart.forEach(item => {
        const li = document.createElement('li');
        li.setAttribute('data-id', item.id);
        li.textContent = `商品ID: ${item.id} - 单价: ¥${item.price} - 数量: ${item.quantity} `;
        const removeButton = document.createElement('button');
        removeButton.textContent = '删除';
        removeButton.classList.add('remove-from-cart');
        li.appendChild(removeButton);
        cartList.appendChild(li);
    });

    totalPriceElement.textContent = totalPrice.toFixed(2);
}