JavaScript 网页设计案例

以下是几个实用的JavaScript网页设计案例，涵盖不同功能和复杂度：

1. 交互式图片画廊

javascript

// 简单的图片画廊
const gallery = document.querySelector(‘.gallery’);
const images = gallery.querySelectorAll(‘img’);
const modal = document.getElementById(‘modal’);
const modalImg = document.getElementById(‘modal-img’);
const closeBtn = document.querySelector(‘.close’);

images.forEach(img => {
img.addEventListener(‘click’, () => {
modal.style.display = ‘block’;
modalImg.src = img.src;
});
});

closeBtn.addEventListener(‘click’, () => {
modal.style.display = ‘none’;
});

window.addEventListener(‘click’, (e) => {
if (e.target === modal) {
modal.style.display = ‘none’;
}
});

2. 动态表单验证

javascript

// 表单实时验证
const form = document.getElementById(‘signup-form’);
const email = document.getElementById(‘email’);
const password = document.getElementById(‘password’);
const confirmPassword = document.getElementById(‘confirm-password’);

form.addEventListener(‘submit’, (e) => {
e.preventDefault();
if (validateForm()) {
alert(‘表单提交成功!’);
form.reset();
}
});

function validateForm() {
let isValid = true;

// 验证邮箱
if (!email.value.includes(‘@’)) {
showError(email, ‘请输入有效的邮箱地址’);
isValid = false;
} else {
showSuccess(email);
}

// 验证密码长度
if (password.value.length < 6) {
showError(password, ‘密码至少需要6个字符’);
isValid = false;
} else {
showSuccess(password);
}

// 验证密码匹配
if (password.value !== confirmPassword.value) {
showError(confirmPassword, ‘密码不匹配’);
isValid = false;
} else {
showSuccess(confirmPassword);
}

return isValid;
}

function showError(input, message) {
const formControl = input.parentElement;
formControl.className = ‘form-control error’;
const small = formControl.querySelector(‘small’);
small.innerText = message;
}

function showSuccess(input) {
const formControl = input.parentElement;
formControl.className = ‘form-control success’;
}

3. 实时搜索过滤

javascript

// 实时搜索过滤列表
const searchInput = document.getElementById(‘search’);
const items = document.querySelectorAll(‘.item’);

searchInput.addEventListener(‘input’, () => {
const searchTerm = searchInput.value.toLowerCase();

items.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(searchTerm)) {
item.style.display = ‘block’;
} else {
item.style.display = ‘none’;
}
});
});

4. 拖放功能实现

javascript

// 拖放功能
const draggables = document.querySelectorAll(‘.draggable’);
const containers = document.querySelectorAll(‘.container’);

draggables.forEach(draggable => {
draggable.addEventListener(‘dragstart’, () => {
draggable.classList.add(‘dragging’);
});

draggable.addEventListener(‘dragend’, () => {
draggable.classList.remove(‘dragging’);
});
});

containers.forEach(container => {
container.addEventListener(‘dragover’, e => {
e.preventDefault();
const afterElement = getDragAfterElement(container, e.clientY);
const draggable = document.querySelector(‘.dragging’);

if (afterElement == null) {
  container.appendChild(draggable);
} else {
  container.insertBefore(draggable, afterElement);
}

});
});

function getDragAfterElement(container, y) {
const draggableElements = […container.querySelectorAll(‘.draggable:not(.dragging)’)];

return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;

if (offset < 0 && offset > closest.offset) {
  return { offset: offset, element: child };
} else {
  return closest;
}

}, { offset: Number.NEGATIVE_INFINITY }).element;
}

5. 无限滚动加载

javascript

// 无限滚动加载内容
const container = document.getElementById(‘content-container’);
let page = 1;
const perPage = 10;
let isLoading = false;

window.addEventListener(‘scroll’, () => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

if (scrollTop + clientHeight >= scrollHeight - 5 && !isLoading) {
loadMoreItems();
}
});

async function loadMoreItems() {
isLoading = true;
document.getElementById(‘loading’).style.display = ‘block’;

try {
// 模拟API请求
const newItems = await fetchItems(page, perPage);

newItems.forEach(item => {
  const itemElement = document.createElement('div');
  itemElement.className = 'item';
  itemElement.textContent = item;
  container.appendChild(itemElement);
});

page++;

} catch (error) {
console.error(‘加载失败:’, error);
} finally {
isLoading = false;
document.getElementById(‘loading’).style.display = ‘none’;
}
}

// 模拟API函数
function fetchItems(page, perPage) {
return new Promise(resolve => {
setTimeout(() => {
const items = [];
const start = (page - 1) * perPage + 1;
const end = start + perPage;

  for (let i = start; i < end; i++) {
    items.push(`项目 ${i}`);
  }
  
  resolve(items);
}, 1000);

});
}

6. 暗黑/明亮模式切换

javascript

// 主题切换功能
const themeToggle = document.getElementById(‘theme-toggle’);
const prefersDarkScheme = window.matchMedia(‘(prefers-color-scheme: dark)’);

// 检查本地存储或系统偏好
const currentTheme = localStorage.getItem(‘theme’) ||
(prefersDarkScheme.matches ? ‘dark’ : ‘light’);
document.body.classList.toggle(‘dark-theme’, currentTheme === ‘dark’);

themeToggle.addEventListener(‘click’, () => {
const isDark = document.body.classList.toggle(‘dark-theme’);
localStorage.setItem(‘theme’, isDark ? ‘dark’ : ‘light’);

// 更新按钮图标
themeToggle.innerHTML = isDark ?
‘’ :
‘’;
});
这些案例展示了JavaScript在网页设计中的常见应用，包括交互元素、表单处理、动态内容加载和UI主题切换等。你可以根据项目需求调整这些代码，或者将它们组合起来创建更复杂的功能。