JavaScript 网页设计案例简单的电商案例页面切换数据搜索动态网页

笑非不退

于 2024-10-01 08:00:00 发布

阅读量654

点赞数 30

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42462436/article/details/142665329

版权

JavaScript 网页设计案例简单的电商案例页面切换数据搜索动态网页

1. 案例描述

以下是一个简单的产品展示网页，用户可以通过点击不同的产品类别按钮来查看相应的产品，且在鼠标悬停时显示产品详情。页面还将包含一个搜索框，用户可以输入关键词来筛选产品。

在这里插入图片描述

2. 文件结构

- index.html    // 主页面
- styles.css    // 样式文件
- script.js     // JavaScript 脚本

3. index.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="search-bar">
        <input type="text" id="search-input" placeholder="搜索产品...">
    </div>

    <!-- 产品类别选择按钮 -->
    <div class="category-buttons">
        <button class="category-btn" data-category="all">全部</button>
        <button class="category-btn" data-category="electronics">电子产品</button>
        <button class="category-btn" data-category="furniture">家具</button>
        <button class="category-btn" data-category="clothing">服装</button>
    </div>

    <!-- 产品展示区 -->
    <div class="product-grid">
        <div class="product-card" data-category="electronics">
            <img src="electronics1.jpg" alt="电子产品1">
            <h3>智能手机</h3>
            <p class="product-details">高性能智能手机，价格实惠。</p>
        </div>
        <div class="product-card" data-category="furniture">
            <img src="furniture1.jpg" alt="家具1">
            <h3>现代沙发</h3>
            <p class="product-details">舒适现代的沙发，适合各种风格。</p>
        </div>
        <div class="product-card" data-category="clothing">
            <img src="clothing1.jpg" alt="服装1">
            <h3>时尚外套</h3>
            <p class="product-details">冬季保暖时尚外套，品质保证。</p>
        </div>
        <!-- 继续添加其他产品 -->
    </div>

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

4. styles.css 文件

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}

.search-bar {
    text-align: center;
    margin-bottom: 20px;
}

#search-input {
    padding: 10px;
    width: 300px;
    font-size: 16px;
}

.category-buttons {
    text-align: center;
    margin-bottom: 20px;
}

.category-btn {
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border: none;
    background-color: #007BFF;
    color: white;
    font-size: 16px;
}

.category-btn:hover {
    background-color: #0056b3;
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.product-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 200px;
    text-align: center;
    transition: transform 0.3s ease;
}

.product-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.product-card h3 {
    margin: 10px 0;
    font-size: 18px;
}

.product-card p {
    padding: 0 10px;
    color: #555;
    font-size: 14px;
    display: none;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card:hover p {
    display: block;
}

5. script.js 文件

// 获取所有产品卡片和类别按钮
const products = document.querySelectorAll('.product-card');
const categoryButtons = document.querySelectorAll('.category-btn');
const searchInput = document.getElementById('search-input');

// 类别按钮点击事件
categoryButtons.forEach(button => {
    button.addEventListener('click', () => {
        const category = button.getAttribute('data-category');

        // 根据类别显示或隐藏产品
        products.forEach(product => {
            if (category === 'all' || product.getAttribute('data-category') === category) {
                product.style.display = 'block';
            } else {
                product.style.display = 'none';
            }
        });
    });
});

// 搜索框输入事件
searchInput.addEventListener('input', () => {
    const searchText = searchInput.value.toLowerCase();

    products.forEach(product => {
        const productName = product.querySelector('h3').textContent.toLowerCase();

        // 根据输入内容筛选产品
        if (productName.includes(searchText)) {
            product.style.display = 'block';
        } else {
            product.style.display = 'none';
        }
    });
});

6. 关键功能解释

类别筛选：

category-buttons 里的按钮点击时，通过设置 data-category 属性来筛选对应类别的产品卡片。
JavaScript 根据点击的按钮 data-category，匹配 product-card 的 data-category，显示或隐藏对应的产品。
搜索功能：

用户在搜索框输入关键词后，通过 input 事件监听输入内容。
JavaScript 使用 .includes() 方法匹配产品名称，实时筛选符合条件的产品。
悬停效果：

使用 CSS 中的 hover，实现产品卡片的悬停效果，显示更多产品详情并添加微妙的上移动画。

7、资料路径

通过网盘分享的文件：JavaScript 网页设计案例
链接: https://pan.baidu.com/s/1TuB4EeKKVZGI-XTQ2zF8Cg?pwd=tbbv 提取码: tbbv

笑非不退

关注

30
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JavaScript 网页设计案例 简单的电商案例 页面切换 数据搜索 动态网页

JavaScript 网页设计案例 简单的电商案例 页面切换 数据搜索 动态网页

1. 案例描述

2. 文件结构

3. index.html 文件

4. styles.css 文件

5. script.js 文件

6. 关键功能解释

7、资料路径

JavaScript 网页设计案例简单的电商案例页面切换数据搜索动态网页

JavaScript 网页设计案例简单的电商案例页面切换数据搜索动态网页