【Javascript】-一些原生的网页设计案例

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">&times;</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. 滚动加载更多

• 功能描述：当用户滚动到页面底部时，自动加载更多内容。
• 实现思路：
  • 使用 IntersectionObserver API 监听元素是否进入视口。
  • 当元素进入视口时，加载更多内容。
• 代码示例：

  <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进行封装和管理，所以了解最底层的原理，很重要。