JavaScript 实现动态产品展示网页

1. HTML 页面结构
2. CSS 样式设计
3. JavaScript 实现功能
功能总结

本文设计了一个基于 JavaScript 的动态产品展示网页案例，核心功能包括：

动态产品分类过滤：通过点击分类按钮，仅显示属于该分类的产品。
产品详情弹窗：点击某个产品，显示该产品的详细信息。
搜索功能：用户可以通过输入关键字快速搜索产品。

1. HTML 页面结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynamic Product Showcase</title><link rel="stylesheet" href="styles.css">
</head>
<body><!-- 页面头部 --><header><h1>Dynamic Product Showcase</h1><input type="text" id="searchBox" placeholder="Search products..." /></header><!-- 分类按钮 --><div class="categories"><button data-category="all" class="category-button active">All</button><button data-category="electronics" class="category-button">Electronics</button><button data-category="fashion" class="category-button">Fashion</button><button data-category="home" class="category-button">Home</button></div><!-- 产品展示区 --><main><div class="product-list"><div class="product" data-category="electronics"><img src="https://via.placeholder.com/150" alt="Product 1"><h3>Smartphone</h3><p>$299</p></div><div class="product" data-category="fashion"><img src="https://via.placeholder.com/150" alt="Product 2"><h3>Leather Jacket</h3><p>$99</p></div><div class="product" data-category="home"><img src="https://via.placeholder.com/150" alt="Product 3"><h3>Table Lamp</h3><p>$49</p></div><div class="product" data-category="electronics"><img src="https://via.placeholder.com/150" alt="Product 4"><h3>Laptop</h3><p>$899</p></div></div></main><!-- 弹窗显示产品详情 --><div id="productModal" class="modal hidden"><div class="modal-content"><span id="closeModal" class="close">&times;</span><img id="modalImage" src="" alt="Product Image"><h3 id="modalTitle"></h3><p id="modalPrice"></p><p id="modalDescription"></p></div></div><script src="script.js"></script>
</body>
</html>

2. CSS 样式设计

/* 通用样式 */
body {font-family: Arial, sans-serif;margin: 0;padding: 0;
}header {background-color: #333;color: white;padding: 20px;text-align: center;
}input#searchBox {margin-top: 10px;padding: 5px;width: 80%;max-width: 400px;
}.categories {display: flex;justify-content: center;padding: 20px;background-color: #f4f4f4;
}.category-button {margin: 0 10px;padding: 10px 20px;border: none;background-color: #007BFF;color: white;cursor: pointer;border-radius: 5px;
}.category-button.active {background-color: #0056b3;
}.product-list {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;padding: 20px;
}.product {width: 200px;border: 1px solid #ccc;border-radius: 5px;text-align: center;padding: 10px;cursor: pointer;transition: transform 0.3s;
}.product:hover {transform: scale(1.05);
}/* 模态框样式 */
.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);justify-content: center;align-items: center;z-index: 1000;
}.modal-content {background-color: white;padding: 20px;border-radius: 10px;text-align: center;width: 300px;
}.close {float: right;cursor: pointer;color: red;
}

3. JavaScript 实现功能

// 获取 DOM 元素
const categoryButtons = document.querySelectorAll('.category-button');
const products = document.querySelectorAll('.product');
const searchBox = document.getElementById('searchBox');
const modal = document.getElementById('productModal');
const modalImage = document.getElementById('modalImage');
const modalTitle = document.getElementById('modalTitle');
const modalPrice = document.getElementById('modalPrice');
const modalDescription = document.getElementById('modalDescription');
const closeModal = document.getElementById('closeModal');// 产品分类过滤
categoryButtons.forEach(button => {button.addEventListener('click', () => {const category = button.getAttribute('data-category');// 更新按钮样式categoryButtons.forEach(btn => btn.classList.remove('active'));button.classList.add('active');// 显示/隐藏产品products.forEach(product => {const productCategory = product.getAttribute('data-category');if (category === 'all' || productCategory === category) {product.style.display = 'block';} else {product.style.display = 'none';}});});
});// 搜索功能
searchBox.addEventListener('input', (e) => {const query = e.target.value.toLowerCase();products.forEach(product => {const title = product.querySelector('h3').textContent.toLowerCase();if (title.includes(query)) {product.style.display = 'block';} else {product.style.display = 'none';}});
});// 产品详情弹窗
products.forEach(product => {product.addEventListener('click', () => {const imageSrc = product.querySelector('img').src;const title = product.querySelector('h3').textContent;const price = product.querySelector('p').textContent;modalImage.src = imageSrc;modalTitle.textContent = title;modalPrice.textContent = price;modalDescription.textContent = 'This is a detailed description of ' + title + '.';modal.style.display = 'flex';});
});// 关闭弹窗
closeModal.addEventListener('click', () => {modal.style.display = 'none';
});