标签：category product 网页 color 案例 const 电商 display card
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
标签：category,
product,
网页,
color,
案例,
const,
电商,
display,
card
From： https://blog.csdn.net/weixin_42462436/article/details/142665329