javascript网页设计案例

以下是一些使用JavaScript实现的网页设计案例，涵盖了多种功能和应用场景：

1. 图片画廊

功能描述：

• 点击缩略图显示大图。
• 支持左右切换图片。
• 支持图片懒加载。
  技术点：
• 使用HTML构建图片列表。
• 使用CSS进行样式设计。
• 使用JavaScript实现图片切换逻辑和懒加载。
  示例代码：

<!-- HTML结构 -->
<div id="gallery">
  <img src="thumbnail1.jpg" data-full="image1.jpg" class="thumbnail">
  <img src="thumbnail2.jpg" data-full="image2.jpg" class="thumbnail">
  <!-- ...更多缩略图... -->
</div>
<div id="lightbox">
  <img src="" alt="" id="full-image">
  <button id="prev">上一张</button>
  <button id="next">下一张</button>
</div>

// JavaScript逻辑
const thumbnails = document.querySelectorAll('.thumbnail');
const fullImage = document.getElementById('full-image');
const lightbox = document.getElementById('lightbox');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');
thumbnails.forEach((thumbnail, index) => {
  thumbnail.addEventListener('click', () => {
    fullImage.src = thumbnail.getAttribute('data-full');
    lightbox.style.display = 'block';
    fullImage.dataset.index = index;
  });
});
prevButton.addEventListener('click', () => {
  let currentIndex = parseInt(fullImage.dataset.index);
  currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
  fullImage.src = thumbnails[currentIndex].getAttribute('data-full');
  fullImage.dataset.index = currentIndex;
});
nextButton.addEventListener('click', () => {
  let currentIndex = parseInt(fullImage.dataset.index);
  currentIndex = (currentIndex + 1) % thumbnails.length;
  fullImage.src = thumbnails[currentIndex].getAttribute('data-full');
  fullImage.dataset.index = currentIndex;
});
lightbox.addEventListener('click', (e) => {
  if (e.target === lightbox) {
    lightbox.style.display = 'none';
  }
});

2. 计算器应用

功能描述：

• 实现基本的数学运算（加、减、乘、除）。
• 清除和删除功能。
  技术点：
• 使用HTML创建按钮和显示区域。
• 使用JavaScript处理用户输入和计算逻辑。
  示例代码：

<!-- HTML结构 -->
<input type="text" id="display" disabled>
<button onclick="press('1')">1</button>
<button onclick="press('2')">2</button>
<!-- ...其他数字和运算符按钮... -->
<button onclick="calculate()">=</button>
<button onclick="clearDisplay()">C</button>

// JavaScript逻辑
let input = '';
function press(num) {
  input += num;
  document.getElementById('display').value = input;
}
function calculate() {
  document.getElementById('display').value = eval(input);
  input = '';
}
function clearDisplay() {
  input = '';
  document.getElementById('display').value = '';
}

3. 表单验证

功能描述：

• 验证用户输入的邮箱、密码等是否合法。
• 实时显示错误信息。
  技术点：
• 使用HTML创建表单。
• 使用CSS进行样式设计。
• 使用JavaScript进行数据验证。
  示例代码：

<!-- HTML结构 -->
<form id="registration-form">
  <input type="email" id="email" required>
  <span id="email-error"></span>
  <input type="password" id="password" required>
  <span id="password-error"></span>
  <button type="submit">注册</button>
</form>

// JavaScript逻辑
const form = document.getElementById('registration-form');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const emailError = document.getElementById('email-error');
const passwordError = document.getElementById('password-error');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  let valid = true;
  if (!emailInput.value.includes('@')) {
    emailError.textContent = '请输入有效的邮箱地址';
    valid = false;
  } else {
    emailError.textContent = '';
  }
  if (passwordInput.value.length < 6) {
    passwordError.textContent = '密码长度至少为6位';
    valid = false;
  } else {
    passwordError.textContent = '';
  }
  if (valid) {
    // 提交表单或进行下一步操作
  }
});

这些案例展示了JavaScript在网页设计中的实际应用，可以根据具体需求进行扩展和优化。