JavaScript 网页设计案例
1. 动态时钟
- 功能描述：在网页上显示一个动态更新的时钟，包括小时、分钟和秒。
- 实现思路：
- 使用
setInterval函数每秒更新时间。 - 获取当前时间并更新页面上的文本。
- 使用
- 代码示例：
<div id="clock"></div> <script> function updateClock() { const now = new Date(); const hours = now.getHours().toString().padStart(2, '0'); const minutes = now.getMinutes().toString().padStart(2, '0'); const seconds = now.getSeconds().toString().padStart(2, '0'); document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`; } setInterval(updateClock, 1000); updateClock(); // 初始化时立即更新一次 </script>
2. 菜单切换效果
- 功能描述：点击菜单项时，显示或隐藏相应的内容区域。
- 实现思路：
- 使用事件监听器监听点击事件。
- 根据点击的菜单项显示或隐藏相应的内容。
- 代码示例：
<ul id="menu"> <li onclick="showContent('home')">首页</li> <li onclick="showContent('about')">关于我们</li> <li onclick="showContent('contact')">联系我们</li> </ul> <div id="content"> <div id="home" class="content-item">欢迎来到首页！</div> <div id="about" class="content-item" style="display: none;">关于我们的一些信息。</div> <div id="contact" class="content-item" style="display: none;">联系方式和地址。</div> </div> <script> function showContent(id) { const contentItems = document.querySelectorAll('.content-item'); contentItems.forEach(item => item.style.display = 'none'); document.getElementById(id).style.display = 'block'; } </script>
3. 表单验证
- 功能描述：在用户提交表单前进行简单的输入验证。
- 实现思路：
- 使用
addEventListener监听表单的提交事件。 - 检查输入是否符合要求，如非空、邮箱格式等。
- 使用
- 代码示例：
<form id="myForm"> <label for="name">姓名:</label> <input type="text" id="name" required> <br> <label for="email">邮箱:</label> <input type="email" id="email" required> <br> <button type="submit">提交</button> </form> <script> document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 const name = document.getElementById('name').value; const email = document.getElementById('email').value; if (name === '' || email === '') { alert('姓名和邮箱不能为空！'); return; } if (!email.includes('@')) { alert('请输入有效的邮箱地址！'); return; } alert('表单提交成功！'); this.submit(); // 提交表单 }); </script>
4. 图片轮播
- 功能描述：在网页上实现图片轮播效果。
- 实现思路：
- 使用
setInterval定时切换图片。 - 使用 CSS 控制图片的显示和隐藏。
- 使用
- 代码示例：
<div id="carousel"> <img src="image1.jpg" class="carousel-image" style="display: block;"> <img src="image2.jpg" class="carousel-image" style="display: none;"> <img src="image3.jpg" class="carousel-image" style="display: none;"> </div> <script> let currentIndex = 0; const images = document.querySelectorAll('.carousel-image'); function showNextImage() { images[currentIndex].style.display = 'none'; currentIndex = (currentIndex + 1) % images.length; images[currentIndex].style.display = 'block'; } setInterval(showNextImage, 3000); // 每3秒切换一次图片 </script>
5. 模态框（Modal）
- 功能描述：点击按钮后弹出一个模态框，模态框内可以显示内容或表单。
- 实现思路：
- 使用 CSS 控制模态框的显示和隐藏。
- 使用 JavaScript 监听按钮点击事件，显示或隐藏模态框。
- 代码示例：
<button id="openModal">打开模态框</button> <div id="modal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>这是一个模态框</p> </div> </div> <style> .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } </style> <script> const modal = document.getElementById('modal'); const openModalBtn = document.getElementById('openModal'); const closeModalBtn = document.querySelector('.close'); openModalBtn.addEventListener('click', () => { modal.style.display = 'block'; }); closeModalBtn.addEventListener('click', () => { modal.style.display = 'none'; }); window.addEventListener('click', (event) => { if (event.target == modal) { modal.style.display = 'none'; } }); </script>
6. 滚动加载更多
- 功能描述：当用户滚动到页面底部时，自动加载更多内容。
- 实现思路：
- 使用
IntersectionObserverAPI 监听元素是否进入视口。 - 当元素进入视口时，加载更多内容。
- 使用
- 代码示例：
<div id="content"> <div class="item">内容1</div> <div class="item">内容2</div> <div class="item">内容3</div> <div id="load-more" class="load-more">加载更多</div> </div> <style> .item { height: 200px; border: 1px solid #ccc; margin: 10px 0; } </style> <script> const loadMore = document.getElementById('load-more'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { loadMoreContent(); } }); }, { threshold: 0.1 }); observer.observe(loadMore); function loadMoreContent() { const content = document.getElementById('content'); for (let i = 0; i < 3; i++) { const newItem = document.createElement('div'); newItem.className = 'item'; newItem.textContent = `新内容${i + 1}`; content.appendChild(newItem); } } </script>
7. 拖放排序
- 功能描述：允许用户通过拖放操作对列表项进行排序。
- 实现思路：
- 使用
dragstart、dragover和drop事件处理拖放操作。 - 在
drop事件中更新列表项的顺序。
- 使用
- 代码示例：
<ul id="sortable-list"> <li draggable="true">项目1</li> <li draggable="true">项目2</li> <li draggable="true">项目3</li> </ul> <style> ul { list-style-type: none; padding: 0; } li { background-color: #f1f1f1; margin: 5px 0; padding: 10px; cursor: move; } </style> <script> const sortableList = document.getElementById('sortable-list'); const items = sortableList.querySelectorAll('li'); items.forEach(item => { item.addEventListener('dragstart', dragStart); item.addEventListener('dragover', dragOver); item.addEventListener('drop', drop); }); function dragStart(e) { e.dataTransfer.setData('text/plain', e.target.id); setTimeout(() => { e.target.classList.add('hide'); }, 0); } function dragOver(e) { e.preventDefault(); e.target.classList.add('over'); } function drop(e) { e.preventDefault(); const draggedItem = document.getElementById(e.dataTransfer.getData('text/plain')); const dropItem = e.target.closest('li'); const parent = dropItem.parentNode; if (dropItem.classList.contains('over')) { parent.insertBefore(draggedItem, dropItem); } else { parent.appendChild(draggedItem); } items.forEach(item => { item.classList.remove('over', 'hide'); }); } </script>
8. 实时搜索过滤
- 功能描述：在用户输入搜索关键词时，实时过滤列表中的项目。
- 实现思路：
- 使用
input事件监听搜索框的输入变化。 - 根据输入的关键词过滤列表项，并更新显示。
- 使用
- 代码示例：
<input type="text" id="search" placeholder="搜索..."> <ul id="list"> <li>苹果</li> <li>香蕉</li> <li>橙子</li> <li>葡萄</li> <li>西瓜</li> </ul> <script> const searchInput = document.getElementById('search'); const list = document.getElementById('list'); const items = list.querySelectorAll('li'); searchInput.addEventListener('input', filterList); function filterList() { const filterValue = searchInput.value.toLowerCase(); items.forEach(item => { if (item.textContent.toLowerCase().includes(filterValue)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } </script>
所有的现代前端框架，不管是数据驱动还是事件驱动，底层都是基于原生的html和javascript进行封装和管理，所以了解最底层的原理，很重要。
