html千与千寻模板

好的，以下是一个简单的模板供参考： HTML 部分： ```html <div class="filter-container"> <div class="filter-group"> <h4 class="filter-title">类型：</h4> <div class="filter-options"> <label><input type="checkbox" name="type" value="action"> 动作</label> <label><input type="checkbox" name="type" value="comedy"> 喜剧</label> <label><input type="checkbox" name="type" value="drama"> 剧情</label> </div> </div> <div class="filter-group"> <h4 class="filter-title">地区：</h4> <div class="filter-options"> <label><input type="checkbox" name="region" value="china"> 中国</label> <label><input type="checkbox" name="region" value="us"> 美国</label> <label><input type="checkbox" name="region" value="japan"> 日本</label> </div> </div> <div class="filter-group"> <h4 class="filter-title">年代：</h4> <div class="filter-options"> <label><input type="checkbox" name="year" value="2010s"> 2010年代</label> <label><input type="checkbox" name="year" value="2000s"> 2000年代</label> <label><input type="checkbox" name="year" value="90s"> 90年代</label> </div> </div> </div> <div class="movie-container"> <!-- 电影列表 --> </div> ``` CSS 部分： ```css .filter-container { display: flex; margin-bottom: 20px; } .filter-group { margin-right: 20px; } .filter-title { margin: 0; margin-bottom: 5px; } .filter-options { margin: 0; } .movie-container { display: flex; flex-wrap: wrap; justify-content: space-between; } .movie-item { width: calc(33.33% - 10px); margin-bottom: 20px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } ``` JavaScript 部分： ```javascript const filters = document.querySelectorAll('.filter-options input[type="checkbox"]'); const movieContainer = document.querySelector('.movie-container'); const movies = [ { title: '速度与激情', type: 'action', region: 'us', year: '2000s' }, { title: '肖申克的救赎', type: 'drama', region: 'us', year: '90s' }, { title: '功夫', type: 'comedy', region: 'china', year: '2000s' }, { title: '千与千寻', type: 'drama', region: 'japan', year: '90s' }, { title: '黑客帝国', type: 'action', region: 'us', year: '90s' }, { title: '让子弹飞', type: 'comedy', region: 'china', year: '2010s' }, { title: '阿甘正传', type: 'drama', region: 'us', year: '90s' }, { title: '疯狂的石头', type: 'comedy', region: 'china', year: '2000s' }, { title: '指环王', type: 'drama', region: 'us', year: '2000s' }, { title: '海上钢琴师', type: 'drama', region: 'italy', year: '90s' }, ]; function renderMovies(movies) { let html = ''; movies.forEach(movie => { html += `<div class="movie-item">${movie.title}</div>`; }); movieContainer.innerHTML = html; } function filterMovies() { const typeFilters = Array.from(document.querySelectorAll('input[name="type"]:checked')).map(input => input.value); const regionFilters = Array.from(document.querySelectorAll('input[name="region"]:checked')).map(input => input.value); const yearFilters = Array.from(document.querySelectorAll('input[name="year"]:checked')).map(input => input.value); let filteredMovies = movies.filter(movie => { if (typeFilters.length > 0 && !typeFilters.includes(movie.type)) { return false; } if (regionFilters.length > 0 && !regionFilters.includes(movie.region)) { return false; } if (yearFilters.length > 0 && !yearFilters.includes(movie.year)) { return false; } return true; }); renderMovies(filteredMovies); } filters.forEach(filter => { filter.addEventListener('change', filterMovies); }); renderMovies(movies); ``` 注意，这只是一个简单的模板，仅供参考。在实际应用中，您需要根据自己的需求进行相应的修改和扩展。