js实现案例
以下是几个常见的JavaScript实现案例，涵盖不同应用场景，可直接用于开发或参考：
动态表单验证
通过监听输入事件实时验证用户输入：
document.getElementById('email').addEventListener('input', function(e) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const isValid = regex.test(e.target.value);
e.target.style.borderColor = isValid ? 'green' : 'red';
});轮播图组件
实现自动播放的图片轮播：
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
function showSlide(index) {
slides.forEach((slide, i) => {
slide.style.display = i === index ? 'block' : 'none';
});
}
setInterval(() => {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}, 3000);本地存储管理
使用localStorage保存用户偏好：
// 存储数据
function savePreferences(theme, fontSize) {
localStorage.setItem('userTheme', theme);
localStorage.setItem('userFontSize', fontSize);
}
// 读取数据
function loadPreferences() {
return {
theme: localStorage.getItem('userTheme') || 'light',
fontSize: localStorage.getItem('userFontSize') || '16px'
};
}AJAX数据请求
使用Fetch API获取远程数据：
async function fetchData(url) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error('Network response was not ok');
return await response.json();
} catch (error) {
console.error('Fetch error:', error);
return null;
}
}
// 使用示例
fetchData('https://api.example.com/data').then(data => {
console.log(data);
});动画效果实现
使用requestAnimationFrame创建平滑动画：
function animateElement(element, duration) {
const start = performance.now();
function update(time) {
const elapsed = time - start;
const progress = Math.min(elapsed / duration, 1);
element.style.transform = `translateX(${progress * 300}px)`;
if (progress < 1) {
requestAnimationFrame(update);
}
}
requestAnimationFrame(update);
}事件委托优化
利用事件冒泡处理动态元素：
document.getElementById('list-container').addEventListener('click', function(e) {
if (e.target.classList.contains('list-item')) {
console.log('Item clicked:', e.target.dataset.id);
}
});这些案例展示了JavaScript在DOM操作、异步处理、数据存储等方面的典型应用，可根据实际需求进行调整和扩展。
