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