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">×</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';
});
功能總結
- 點擊 分類按鈕，僅顯示對應分類的產品。
- 輸入關鍵字到 搜索框，可實時過濾產品列表。
- 點擊產品卡片，彈窗顯示產品的詳情信息。
)
![Python小括號( )、中括號[ ]和大括號{}代表什么](http://pic.xiahunao.cn/Python小括號( )、中括號[ ]和大括號{}代表什么)
 內網穿透 Liunx環境雙端Docker部署)
![[Android]init中添加新的command](http://pic.xiahunao.cn/[Android]init中添加新的command)
