当前位置：首页 > JavaScript

js实现案例

2026-04-07 00:57:34JavaScript

以下是几个常见的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';
});

轮播图组件

实现自动播放的图片轮播：

js实现案例

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获取远程数据：

js实现案例

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操作、异步处理、数据存储等方面的典型应用，可根据实际需求进行调整和扩展。