JavaScript 网页设计经典案例代码全览

仰望丨苍穹

于 2024-09-27 04:00:00 发布

阅读量907

点赞数 15

分类专栏：前端：技巧与实践文章标签： javascript css html 前端开发语言

本文链接：https://blog.csdn.net/qq_31426349/article/details/142577412

版权

前端：技巧与实践专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、响应式导航栏

HTML 结构：

<nav>  <!-- 这是一个导航栏的容器 -->
  <div class="logo">Your Logo</div>  <!-- 用于显示 logo 的 div 元素 -->
  <div class="menu-icon">&#9776;</div>  <!-- 显示菜单图标（通常用于触发菜单的显示/隐藏） -->
  <ul class="menu">  <!-- 无序列表，包含导航链接 -->
    <li><a href="#">Home</a></li>  <!-- 导航链接：首页 -->
    <li><a href="#">About</a></li>  <!-- 导航链接：关于 -->
    <li><a href="#">Services</a></li>  <!-- 导航链接：服务 -->
    <li><a href="#">Contact</a></li>  <!-- 导航链接：联系 -->
  </ul>
</nav>

这段代码只是简单地构建了一个包含 logo、菜单图标和几个常见导航链接的基本导航栏。如果要进一步优化，可以考虑添加交互效果（如点击菜单图标展开 / 收起菜单），以及根据设计需求调整样式。

CSS 样式：

nav {  /* 定义导航栏的整体样式 */
  display: flex;  /* 使用 Flex 布局 */
  justify-content: space-between;  /* 项目在主轴上两端对齐，间距平均分布 */
  align-items: center;  /* 项目在交叉轴上居中对齐 */
  padding: 15px;  /* 内边距为 15 像素 */
}

.logo {  /* 定义 logo 的样式 */
  font-size: 24px;  /* 字体大小为 24 像素 */
}

.menu-icon {  /* 定义菜单图标的样式 */
  font-size: 30px;  /* 字体大小为 30 像素 */
  cursor: pointer;  /* 鼠标指针显示为手型，提示可点击 */
}

.menu {  /* 定义菜单列表的样式 */
  display: flex;  /* 使用 Flex 布局 */
  list-style: none;  /* 去除列表的默认样式（项目符号） */
  margin: 0;  /* 外边距为 0 */
  padding: 0;  /* 内边距为 0 */
  display: none;  /* 初始时隐藏菜单列表 */
}

.menu li {  /* 定义菜单列表项的样式 */
  margin-right: 20px;  /* 右侧外边距为 20 像素 */
}

.menu li a {  /* 定义菜单列表项中链接的样式 */
  text-decoration: none;  /* 去除链接的下划线 */
  color: #333;  /* 文本颜色为 #333 */
}

@media screen and (min-width: 768px) {  /* 当屏幕宽度至少为 768 像素时应用以下样式 */
.menu-icon {  /* 隐藏菜单图标 */
    display: none;
  }

.menu {  /* 显示菜单列表 */
    display: flex;
  }
}

这段 CSS 代码实现了一个响应式的导航栏样式。在小屏幕上，菜单列表默认隐藏，通过点击菜单图标显示；在大屏幕上，菜单图标隐藏，菜单列表直接显示。不过，如果要进一步优化，可以考虑添加更多的过渡效果，以增强用户体验。

JavaScript 代码：

const menuIcon = document.querySelector('.menu-icon');  // 获取具有 '.menu-icon' 类的元素
const menu = document.querySelector('.menu');  // 获取具有 '.menu' 类的元素

menuIcon.addEventListener('click', () => {  // 为菜单图标添加点击事件监听器
  menu.style.display = menu.style.display === 'flex'? 'none' : 'flex';  // 点击时切换菜单的显示状态，如果当前是 'flex' 则设置为 'none'，否则设置为 'flex'
});

这段代码实现了通过点击菜单图标来切换菜单的显示与隐藏。效率方面，这种直接操作 DOM 样式的方式在简单场景下是可行的，但在复杂应用中，可能会考虑使用更模块化和可维护的方式，例如使用类名切换或状态管理库来控制显示状态。

二、图片轮播

HTML 结构：

<div class="slider">  <!-- 定义一个名为 slider 的容器 -->
  <img src="image1.jpg" alt="Image 1">  <!-- 放置第一张图片 -->
  <img src="image2.jpg" alt="Image 2">  <!-- 放置第二张图片 -->
  <img src="image3.jpg" alt="Image 3">  <!-- 放置第三张图片 -->
</div>
<div class="dots"></div>  <!-- 定义一个名为 dots 的空容器，可能用于后续添加与图片切换相关的指示点 -->

这段代码构建了一个图片滑块的基本结构。slider 容器用于容纳图片，而 dots 容器可能会在后续添加与图片切换对应的指示点或其他相关元素。目前仅定义了结构，还需要通过 CSS 和 JavaScript 来实现图片的切换效果和指示点的功能。

CSS 样式：

.slider {  /* 定义 slider 容器的样式 */
  position: relative;  /* 相对定位，为内部绝对定位的元素提供参考 */
  overflow: hidden;  /* 隐藏超出容器范围的内容 */
}

.slider img {  /* 定义 slider 容器内图片的通用样式 */
  display: none;  /* 初始时隐藏所有图片 */
  position: absolute;  /* 绝对定位，相对于 slider 容器定位 */
  top: 0;  /* 顶部对齐 */
  left: 0;  /* 左侧对齐 */
  width: 100%;  /* 宽度占满父容器 */
  height: auto;  /* 高度自适应 */
}

.slider img.active {  /* 定义处于激活状态（显示）的图片样式 */
  display: block;  /* 显示为块级元素 */
}

.dots {  /* 定义 dots 容器的样式 */
  text-align: center;  /* 内容居中对齐 */
  margin-top: 10px;  /* 顶部外边距为 10 像素 */
}

.dots span {  /* 定义 dots 容器内的 span 元素样式 */
  display: inline-block;  /* 内联块级元素，可设置宽高和内外边距 */
  width: 10px;  /* 宽度为 10 像素 */
  height: 10px;  /* 高度为 10 像素 */
  border-radius: 50%;  /* 圆形样式 */
  background-color: #ccc;  /* 背景颜色为 #ccc */
  margin: 0 5px;  /* 左右外边距为 5 像素 */
  cursor: pointer;  /* 鼠标指针显示为手型，提示可点击 */
}

.dots span.active {  /* 定义处于激活状态的 dots 内的 span 元素样式 */
  background-color: #333;  /* 背景颜色为 #333 */
}

这段 CSS 代码为图片滑块和相关的指示点设置了样式。通过 active 类来控制图片的显示和指示点的状态变化。若要进一步优化，可考虑添加更多的过渡效果或根据不同屏幕尺寸进行响应式调整。

JavaScript 代码：

const images = document.querySelectorAll('.slider img');  // 获取所有具有 '.slider img' 类的图片元素
const dots = document.querySelectorAll('.dots span');  // 获取所有具有 '.dots span' 类的点元素

let currentIndex = 0;  // 初始化当前显示图片的索引为 0

function showImage(index) {  // 定义显示指定索引图片的函数
  images.forEach((image) => {  // 遍历所有图片
    image.classList.remove('active');  // 移除所有图片的 'active' 类，隐藏它们
  });

  dots.forEach((dot) => {  // 遍历所有点
    dot.classList.remove('active');  // 移除所有点的 'active' 类，使其处于非激活状态
  });

  images[index].classList.add('active');  // 为指定索引的图片添加 'active' 类，显示该图片
  dots[index].classList.add('active');  // 为对应索引的点添加 'active' 类，使其处于激活状态
}

function nextImage() {  // 定义切换到下一张图片的函数
  currentIndex++;  // 索引增加
  if (currentIndex >= images.length) {  // 如果索引超出图片数量
    currentIndex = 0;  // 则回到第一张图片
  }
  showImage(currentIndex);  // 显示当前索引的图片
}

function prevImage() {  // 定义切换到上一张图片的函数
  currentIndex--;  // 索引减少
  if (currentIndex < 0) {  // 如果索引小于 0
    currentIndex = images.length - 1;  // 则回到最后一张图片
  }
  showImage(currentIndex);  // 显示当前索引的图片
}

dots.forEach((dot, index) => {  // 为每个点添加点击事件监听器
  dot.addEventListener('click', () => {  // 当点击点时
    showImage(index);  // 显示对应索引的图片
    currentIndex = index;  // 更新当前索引
  });
});

setInterval(nextImage, 3000);  // 每隔 3 秒自动切换到下一张图片

这段代码实现了一个简单的图片滑块功能，包括手动点击点切换图片、自动每隔 3 秒切换到下一张图片，并且在切换时同步更新图片和点的激活状态。但如果图片数量较多或性能要求较高，可以考虑对图片的加载和显示进行优化，例如懒加载。

三、表单验证

HTML 结构：

<form>  <!-- 定义一个表单 -->
  <label for="email">Email:</label>  <!-- 为邮箱输入框添加标签 -->
  <input type="email" id="email" name="email">  <!-- 输入类型为邮箱的输入框，具有唯一的 ID 和名称 -->
  <label for="password">Password:</label>  <!-- 为密码输入框添加标签 -->
  <input type="password" id="password" name="password">  <!-- 输入类型为密码的输入框，具有唯一的 ID 和名称 -->
  <button type="submit">Submit</button>  <!-- 提交按钮，点击时提交表单数据 -->
</form>

这段代码构建了一个包含邮箱和密码输入框以及提交按钮的基本表单。表单提交后，将按照 name 属性的值发送输入框中的数据。如果要进一步优化，可能需要后端处理程序来接收和处理提交的数据，并可能需要添加一些前端验证逻辑来确保输入的有效性。

CSS 样式：

form {  /* 定义表单的样式 */
  display: flex;  /* 使用 Flex 布局 */
  flex-direction: column;  /* 按列排列子元素 */
}

label {  /* 定义标签的样式 */
  margin-top: 10px;  /* 顶部外边距为 10 像素 */
}

input {  /* 定义输入框的样式 */
  padding: 5px;  /* 内边距为 5 像素 */
}

button {  /* 定义按钮的样式 */
  margin-top: 10px;  /* 顶部外边距为 10 像素 */
  padding: 10px;  /* 内边距为 10 像素 */
  background-color: #4CAF50;  /* 背景颜色为 #4CAF50 */
  color: white;  /* 文字颜色为白色 */
  border: none;  /* 无边框 */
  cursor: pointer;  /* 鼠标指针显示为手型，提示可点击 */
}

这段 CSS 代码为表单元素设置了样式。表单采用了 Flex 布局的列方向，标签有一定的顶部间距，输入框有内边距，按钮有特定的样式，包括外边距、内边距、背景颜色、文字颜色和鼠标指针样式。如果要进一步优化，可以根据具体的设计需求调整颜色、字体等细节，或者添加响应式设计以适应不同的屏幕尺寸。

JavaScript 代码：

const form = document.querySelector('form');  // 获取表单元素
const emailInput = document.getElementById('email');  // 获取邮箱输入框元素
const passwordInput = document.getElementById('password');  // 获取密码输入框元素

form.addEventListener('submit', (e) => {  // 为表单添加提交事件监听器
  e.preventDefault();  // 阻止表单默认的提交行为

  let isValid = true;  // 初始化表单有效性为真

  if (!emailInput.value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {  // 如果邮箱输入值不符合正则表达式（不是有效的邮箱格式）
    isValid = false;  // 表单有效性设为假
    emailInput.classList.add('invalid');  // 给邮箱输入框添加 'invalid' 类（可能用于添加错误样式）
  } else {
    emailInput.classList.remove('invalid');  // 如果是有效的邮箱格式，移除 'invalid' 类
  }

  if (passwordInput.value.length < 6) {  // 如果密码长度小于 6 位
    isValid = false;  // 表单有效性设为假
    passwordInput.classList.add('invalid');  // 给密码输入框添加 'invalid' 类
  } else {
    passwordInput.classList.remove('invalid');  // 如果密码长度足够，移除 'invalid' 类
  }

  if (isValid) {  // 如果表单有效
    // 表单验证通过，可以进行提交操作
    alert('Form submitted successfully!');  // 弹出成功提交的提示
  }
});

这段代码实现了在表单提交时进行前端的基本验证。包括检查邮箱格式是否正确和密码长度是否至少为 6 位。如果验证通过，会弹出成功提交的提示；如果不通过，会给相应的输入框添加表示错误的类。但如果验证规则变得更加复杂，可以考虑将验证逻辑提取为单独的函数以提高代码的可读性和可维护性。