javascript网页设计案例-6个经典案例详解与代码实现

引言  

JavaScript 是前端网页设计的核心语言，能够实现动态交互、数据操作和复杂功能。本文将通过 **6个经典网页设计案例**，从基础到进阶，详细讲解如何用 JavaScript 实现常见功能。示例如下：

案例 1：动态导航栏（高亮当前页面）  

功能：根据用户滚动位置，自动高亮导航栏对应的菜单项。  

实现步骤：  
1. HTML 结构：定义导航栏和对应的内容区块。  
2. CSS 样式：设置高亮效果和滚动平滑过渡。  
3. JavaScript 监听滚动事件，计算当前视口位置并更新导航栏状态。  

<!-- HTML -->
<nav id="navbar">
  <ul>
    <li><a href="#home" class="active">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>
<section id="home" class="section">首页内容</section>
<section id="about" class="section">关于内容</section>
<section id="contact" class="section">联系内容</section>

// JavaScript
const sections = document.querySelectorAll('.section');
const navLinks = document.querySelectorAll('nav a');

window.addEventListener('scroll', () => {
  let current = '';
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (pageYOffset >= sectionTop - sectionHeight / 3) {
      current = section.getAttribute('id');
    }
  });

  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href').includes(current)) {
      link.classList.add('active');
    }
  });
});

/* CSS */
.section { height: 100vh; padding: 20px; }
nav { position: fixed; top: 0; background: #333; width: 100%; }
nav a { color: white; padding: 15px; text-decoration: none; }
nav a.active { background: #007bff; }
html { scroll-behavior: smooth; } /* 平滑滚动 */

案例 2：图片轮播（自动播放 + 手动切换）  

功能：自动轮播图片，支持手动切换和指示器。  

<!-- HTML -->
<div class="carousel">
  <div class="slides">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <button class="prev">❮</button>
  <button class="next">❯</button>
  <div class="indicators"></div>
</div>

// JavaScript
let currentSlide = 0;
const slides = document.querySelectorAll('.slides img');
const indicators = document.querySelector('.indicators');

// 初始化指示器
slides.forEach((_, index) => {
  const dot = document.createElement('span');
  dot.classList.add('dot');
  if (index === 0) dot.classList.add('active');
  dot.addEventListener('click', () => goToSlide(index));
  indicators.appendChild(dot);
});

// 切换幻灯片
function goToSlide(index) {
  slides[currentSlide].classList.remove('active');
  document.querySelectorAll('.dot')[currentSlide].classList.remove('active');
  currentSlide = (index + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
  document.querySelectorAll('.dot')[currentSlide].classList.add('active');
}

// 自动播放
setInterval(() => goToSlide(currentSlide + 1), 3000);

// 按钮事件
document.querySelector('.prev').addEventListener('click', () => goToSlide(currentSlide - 1));
document.querySelector('.next').addEventListener('click', () => goToSlide(currentSlide + 1));

/* CSS */
.carousel { position: relative; max-width: 800px; margin: auto; }
.slides img { display: none; width: 100%; }
.slides img.active { display: block; }
.prev, .next { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  padding: 16px; 
  background: rgba(0,0,0,0.5); 
  color: white; 
  border: none;
}
.prev { left: 0; }
.next { right: 0; }
.indicators { text-align: center; margin-top: 10px; }
.dot { 
  display: inline-block; 
  width: 12px; 
  height: 12px; 
  background: #ddd; 
  border-radius: 50%; 
  margin: 0 5px; 
  cursor: pointer;
}
.dot.active { background: #007bff; }

案例 3：表单实时验证  

功能：用户输入时实时验证邮箱和密码格式。  

<!-- HTML -->
<form id="signup-form">
  <input type="email" id="email" placeholder="邮箱">
  <div class="error" id="email-error"></div>
  <input type="password" id="password" placeholder="密码（至少6位）">
  <div class="error" id="password-error"></div>
  <button type="submit">注册</button>
</form>

// JavaScript
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const emailError = document.getElementById('email-error');
const passwordError = document.getElementById('password-error');

// 邮箱验证正则表达式
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// 实时验证
emailInput.addEventListener('input', () => {
  if (!emailRegex.test(emailInput.value)) {
    emailError.textContent = '邮箱格式不正确';
  } else {
    emailError.textContent = '';
  }
});

passwordInput.addEventListener('input', () => {
  if (passwordInput.value.length < 6) {
    passwordError.textContent = '密码至少需要6位';
  } else {
    passwordError.textContent = '';
  }
});

// 提交验证
document.getElementById('signup-form').addEventListener('submit', (e) => {
  e.preventDefault();
  if (emailError.textContent || passwordError.textContent) {
    alert('请修正错误后提交！');
  } else {
    alert('提交成功！');
    // 这里可以添加实际提交逻辑
  }
});

/* CSS */
input { display: block; width: 300px; margin: 10px 0; padding: 8px; }
.error { color: red; font-size: 12px; height: 14px; }
button { background: #007bff; color: white; padding: 10px 20px; border: none; }

案例 4：动态加载更多内容（无限滚动）  

功能：滚动到页面底部时自动加载更多数据。  

<!-- HTML -->
<div id="content">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <!-- 初始内容 -->
</div>
<div id="loading" style="display: none;">加载中...</div>

// JavaScript
let page = 1;
const loading = document.getElementById('loading');

// 模拟异步加载数据
function loadMore() {
  loading.style.display = 'block';
  setTimeout(() => {
    for (let i = 0; i < 5; i++) {
      const item = document.createElement('div');
      item.className = 'item';
      item.textContent = `内容${page * 5 + i + 1}`;
      document.getElementById('content').appendChild(item);
    }
    page++;
    loading.style.display = 'none';
  }, 1000);
}

// 监听滚动事件
window.addEventListener('scroll', () => {
  const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    loadMore();
  }
});

// 初始加载
loadMore();

/* CSS */
.item { padding: 20px; border: 1px solid #ddd; margin: 10px; }
#loading { text-align: center; padding: 20px; }

案例 5：实时搜索过滤  

功能：输入关键词实时过滤列表内容。  

<!-- HTML -->
<input type="text" id="search" placeholder="搜索...">
<ul id="list">
  <li>JavaScript 教程</li>
  <li>HTML 入门</li>
  <li>CSS 动画指南</li>
  <li>Vue.js 实战</li>
</ul>

// JavaScript
document.getElementById('search').addEventListener('input', function() {
  const keyword = this.value.toLowerCase();
  const items = document.querySelectorAll('#list li');
  
  items.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(keyword) ? 'block' : 'none';
  });
});

/* CSS */
#search { width: 300px; padding: 8px; margin: 10px 0; }
#list li { padding: 8px; border-bottom: 1px solid #ddd; }

案例 6：动态主题切换  

功能：通过按钮切换网页主题（深色/浅色模式）。  

<!-- HTML -->
<button id="theme-toggle">切换主题</button>

// JavaScript
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// 从本地存储读取主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme) body.classList.add(savedTheme);

themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-theme');
  const theme = body.classList.contains('dark-theme') ? 'dark-theme' : '';
  localStorage.setItem('theme', theme);
});

/* CSS */
body { transition: background 0.3s, color 0.3s; }
.dark-theme { background: #333; color: white; }
button { padding: 10px 20px; cursor: pointer; }

总结  

通过以上 6 个案例，可以掌握 JavaScript 在网页设计中的核心应用：  

• 交互设计（导航栏、轮播图）
• 用户输入处理（表单验证、搜索过滤）  
• 动态内容管理（无限滚动、主题切换）  

下一步建议：  

• 尝试将多个案例组合（如无限滚动 + 搜索过滤）
• 探索更多 API（如 Fetch API 实现数据加载） 
• 学习框架（如 React 或 Vue）提升开发效率

希望这些案例可以帮助到你，觉得作者写的有帮助，可以点个关注支持一下，谢谢！