当前位置: 首页 > article >正文

以下列举了一些典型的JavaScript网页设计实例,它们展示了多样化的功能和交互体验,非常适合初学者及中级开发者学习借鉴如下:

1. 动态导航栏

   - 功能描述:创建响应导航栏,当用户滚动页面时,导航栏固定在页面顶部,并显示当前页面部分。

   - 技术点:

     - `window.scroll` 事件监控页面滚动。

     - `classList` 动态添加/移除 CSS 类。

     - `IntersectionObserver` 检测元素是否进入视口。

   - 示例代码:

     ```javascript

     window.addEventListener('scroll', () => {

         const nav = document.querySelector('nav');

         if (window.scrollY > 50) {

             nav.classList.add('fixed-nav');

         } else {

             nav.classList.remove('fixed-nav');

         } }); ```

---

2. 图片轮播(Carousel)

   - 功能描述:用户可以手动切换图片,实现自动播放的图片轮播组件。

   - 技术点:

     - `setInterval` 实现自动播放。

     - `transform: translateX` 实现图片切换动画。

     - 监控事件(点击按钮切换图片)。

   - 示例代码:

     ```javascript

     let currentIndex = 0;

     const slides = document.querySelectorAll('.carousel img');

     const totalSlides = slides.length;

 

     function showSlide(index) {

         slides.forEach((slide, i) => {

             slide.style.transform = `translateX(${100 * (i - index)}%)`;

         }); }

     document.querySelector('.next').addEventListener('click', () => {

         currentIndex = (currentIndex 1) % totalSlides;

         showSlide(currentIndex);

     });

     document.querySelector('.prev').addEventListener('click', () => {

         currentIndex = (currentIndex - 1 totalSlides) % totalSlides;

         showSlide(currentIndex);

     }); ```

3. 模态框(Modal)

   - 功能描述:单击按钮弹出模态框,单击关闭按钮或背景区域关闭模态框。

   - 技术点:

     - `display: none/block` 显示和隐藏控制模态框。

     - 委托事件(点击背景关闭模态框)。

   - 示例代码:

     ```javascript

     const modal = document.getElementById('modal');

     const openBtn = document.getElementById('open-modal');

     const closeBtn = document.getElementById('close-modal');

 

     openBtn.addEventListener('click', () => {

         modal.style.display = 'block';

     });

     closeBtn.addEventListener('click', () => {

         modal.style.display = 'none';

     });

     window.addEventListener('click', (e) => {

         if (e.target === modal) {

             modal.style.display = 'none';

         } }); ```

---

 4. 表单验证

   - 功能描述:实时验证用户输入的表单数据,如邮箱格式、密码强度等。

   - 技术点:

     - `input` 监控用户输入事件。

     - 正则表达式验证格式。

     - 动态显示错误提示。

   - 示例代码:

     ```javascript

     const emailInput = document.getElementById('email');

     const errorMsg = document.getElementById('error-msg');

 

     emailInput.addEventListener('input', () => {

         const email = emailInput.value;

         if ()/**[^\^\^s@] @[^\s@] \.[^\s@] $/.test(email)) {

             errorMsg.textContent = 请输入有效的邮箱地址;

         } else {

             errorMsg.textContent = '';

         } }); ```

---

5. 无限滚动加载

   - 功能描述:当用户滚动到页面底部时,会自动加载更多内容。

   - 技术点:

     - `window.scroll` 监控滚动事件。

     - `fetch` 动态加载数据。

     - `IntersectionObserver` 检测页面底部。

   - 示例代码:

     ```javascript

     let page = 1;

     const loadMore = document.getElementById('load-more');

 

     const observer = new IntersectionObserver((entries) => {

         if (entries[0].isIntersecting) {

             fetch(`/api/data?page=${page}`)

                 .then(response => response.json())

                 .then(data => {

                     // 渲染新数据

                     page ;

                 }); } });

     observer.observe(loadMore);

     ```

---

6. 拖拽功能

   - 功能描述:实现元素的拖动功能,用户可将页面上的元素拖动到指定区域。

   - 技术点:

     - `dragstart`、`dragend` 事件。

     - `draggable` 属性。

   - 示例代码:

     ```javascript

     const draggable = document.getElementById('draggable');

     const dropzone = document.getElementById('dropzone');

 

     draggable.addEventListener('dragstart', (e) => {

         e.dataTransfer.setData('text/plain', e.target.id);

     });

     dropzone.addEventListener('dragover', (e) => {

         e.preventDefault();

     });

     dropzone.addEventListener('drop', (e) => {

         e.preventDefault();

         const id = e.dataTransfer.getData('text/plain');

         const element = document.getElementById(id);

         dropzone.appendChild(element);

     }); ```

---

 7. 黑暗模式切换

   - 功能描述:用户点击按钮切换页面的黑暗模式和亮色模式。

   - 技术点:

     - `localStorage` 保留用户偏好。

     - `classList.toggle` 切换 CSS 类。

   - 示例代码:

     ```javascript

     const toggleBtn = document.getElementById('toggle-mode');

     const body = document.body;

 

     toggleBtn.addEventListener('click', () => {

         body.classList.toggle('dark-mode');

         localStorage.setItem('theme', body.classList.contains('dark-mode') ? 'dark' : 'light');

     });

     // 加载主题的初始化

     const savedTheme = localStorage.getItem('theme');

     if (savedTheme === 'dark') {

         body.classList.add('dark-mode'); } ```

---


http://www.kler.cn/a/586384.html

相关文章:

  • 在MAC mini4上安装Ollama、Chatbox及模型交互指南
  • 电网电压暂态扰动机理与工业设备抗失压防护策略研究
  • 提升 Instagram 账号安全性:防止数据泄露的步骤
  • sqldef:一款免费的数据库变更管理工具
  • rpmlib(SetVersions) is needed by can-uilts-v2019.00.0-alt1.aarch64
  • Java序列化
  • Yolo-Uniow开集目标检测本地复现
  • 基于微信小程序开发的宠物领养平台——代码解读
  • QT编程之QGIS
  • SQLAlchemy系列教程:批量插入数据
  • 卷积神经网络 - 一维卷积、二维卷积
  • 适合企业内训的AI工具实操培训教程(37页PPT)(文末有下载方式)
  • 基于6自由度搬运机器人完成单关节伺服控制实现的详细步骤及示例代码
  • opencv-显示图片
  • Mybatis语法bug
  • DeepSeek linux服务器(CentOS)部署命令笔记
  • React面试(二)
  • C语言基础知识04
  • 人工智能与人的智能,改变一生的思维模型分享【4】决策树
  • 有效的括号 力扣20