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: padding: 20px;
}.search-bar {text-align: center;margin-bottom: 20px;
}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: color: white;font-size: 16px;
}.category-btn:hover {background-color:
}.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: 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
