首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript网页设计案例:10个经典案例(含代码示例)

JavaScript网页设计案例:10个经典案例(含代码示例)

作者头像
大熊计算机
发布2025-07-14 16:51:16
发布2025-07-14 16:51:16
30500
代码可运行
举报
文章被收录于专栏:C博文C博文
运行总次数:0
代码可运行
JavaScript网页设计案例:10个经典案例(含代码示例)

JavaScript 作为前端开发的核心语言,为网页设计和开发提供了强大的功能支持。以下列举10个经典的 JavaScript 网页设计案例,每个案例都包含一个简洁的代码示例,帮助大家更好地理解 JavaScript 在网页设计中的实际应用。

二、10个经典 JavaScript 案例

动态图片轮播

案例简介:动态图片轮播适用于展示广告、产品图片等,能够自动播放并支持手动切换。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<div class="slider">
  <img id="slide" src="image1.jpg" alt="Slide">
</div>
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

<script>
  let images = ["image1.jpg", "image2.jpg", "image3.jpg"];
  let currentIndex = 0;

  function showSlide(index) {
    document.getElementById('slide').src = images[index];
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % images.length;
    showSlide(currentIndex);
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showSlide(currentIndex);
  }

  setInterval(nextSlide, 3000);
</script>

悬停下拉菜单

案例简介:下拉菜单用于多级导航,提升用户的浏览体验。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<nav>
  <ul>
    <li onmouseover="showMenu()" onmouseout="hideMenu()">Menu
      <ul id="submenu" style="display: none;">
        <li>Option 1</li>
        <li>Option 2</li>
      </ul>
    </li>
  </ul>
</nav>

<script>
  function showMenu() {
    document.getElementById('submenu').style.display = 'block';
  }

  function hideMenu() {
    document.getElementById('submenu').style.display = 'none';
  }
</script>

模态弹窗

案例简介:模态弹窗用于提示信息或用户登录。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<button onclick="openModal()">Open Modal</button>
<div id="modal" style="display: none;">
  <div class="modal-content">
    <span onclick="closeModal()">Close</span>
    <p>This is a modal window!</p>
  </div>
</div>

<script>
  function openModal() {
    document.getElementById('modal').style.display = 'block';
  }

  function closeModal() {
    document.getElementById('modal').style.display = 'none';
  }
</script>

表单验证

案例简介:表单验证用于检查用户输入的有效性。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<form onsubmit="return validateForm()">
  <label>Email:</label>
  <input type="text" id="email">
  <span id="error" style="color: red;"></span>
  <button type="submit">Submit</button>
</form>

<script>
  function validateForm() {
    const email = document.getElementById('email').value;
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if (!emailPattern.test(email)) {
      document.getElementById('error').textContent = "Invalid email";
      return false;
    }
    document.getElementById('error').textContent = "";
    return true;
  }
</script>

响应式导航栏

案例简介:响应式导航栏适用于移动设备和桌面设备的自动调整。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<div class="nav">
  <button onclick="toggleNav()">☰ Menu</button>
  <ul id="navList" style="display: none;">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

<script>
  function toggleNav() {
    const navList = document.getElementById('navList');
    if (navList.style.display === 'none') {
      navList.style.display = 'block';
    } else {
      navList.style.display = 'none';
    }
  }
</script>

滚动到顶部按钮

案例简介:滚动到顶部按钮能够快速返回页面顶部。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<button id="topBtn" onclick="scrollToTop()" style="display: none;">Top</button>

<script>
  window.onscroll = function() {
    document.getElementById('topBtn').style.display = window.scrollY > 100 ? 'block' : 'none';
  };

  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
</script>

倒计时计时器

案例简介:倒计时用于活动、促销等场景。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<div id="countdown"></div>

<script>
  const countdownDate = new Date("2025-01-01").getTime();

  const countdownInterval = setInterval(() => {
    const now = new Date().getTime();
    const distance = countdownDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("countdown").innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;

    if (distance < 0) {
      clearInterval(countdownInterval);
      document.getElementById("countdown").innerHTML = "EXPIRED";
    }
  }, 1000);
</script>

图片懒加载

案例简介:图片懒加载用于提高网页加载性能。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<img data-src="image.jpg" class="lazy-load" width="200" height="200">

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const lazyImages = document.querySelectorAll("img.lazy-load");
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });

    lazyImages.forEach(img => observer.observe(img));
  });
</script>

图片放大镜效果

案例简介:放大镜效果用于细节展示。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<img id="image" src="image.jpg" width="300" height="200" onmousemove="zoom(event)" style="position:relative;">

<script>
  function zoom(event) {
    const image = document.getElementById('image');
    const zoomLevel = 2;
    const rect = image.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    image.style.transformOrigin = `${x}px ${y}px`;
    image.style.transform = `scale(${zoomLevel})`;
  }
</script>

数字滚动动画

案例简介:数字滚动用于展示统计数据,如访问量、销售量等。

代码示例

代码语言:javascript
代码运行次数:0
运行
复制
<div id="counter" data-target="5000">0</div>

<script>
  const counter = document.getElementById('counter');
  const target = +counter.getAttribute('data-target');
  let count = 0;

  const updateCount = () => {
    const increment = target / 200;
    count += increment;
    counter.innerText = Math.floor(count);
    if (count < target) {
      requestAnimationFrame(updateCount);
    }
  };

  updateCount();
</script>
三、总结

以上10个经典 JavaScript 案例涵盖了动态效果、交互功能和性能优化等不同方面。这些案例不仅能够提升网页的用户体验,还能帮助开发者掌握 JavaScript 的基本应用。希望这些代码示例能够为大家提供灵感,让网页设计更加出色。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JavaScript网页设计案例:10个经典案例(含代码示例)
    • 二、10个经典 JavaScript 案例
    • 三、总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档