当前位置：首页 > JavaScript

js 实现功能实现

2026-01-31 12:35:54JavaScript

使用 JavaScript 实现常见功能

动态加载数据

通过 fetch 或 axios 从 API 获取数据并渲染到页面：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('data-container');
    data.forEach(item => {
      const element = document.createElement('div');
      element.textContent = item.name;
      container.appendChild(element);
    });
  })
  .catch(error => console.error('Error:', error));

表单验证

监听表单提交事件并检查输入合法性：

document.getElementById('form').addEventListener('submit', (event) => {
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;

  if (!email.includes('@')) {
    alert('请输入有效的邮箱地址');
    event.preventDefault();
  }

  if (password.length < 6) {
    alert('密码长度至少为6位');
    event.preventDefault();
  }
});

实现轮播图

使用 CSS 和 JavaScript 创建简单的轮播效果：

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.style.display = i === index ? 'block' : 'none';
  });
}

document.getElementById('next').addEventListener('click', () => {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
});

document.getElementById('prev').addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide(currentSlide);
});

showSlide(0); // 初始显示第一张

本地存储数据

使用 localStorage 保存用户数据：

// 存储数据
localStorage.setItem('username', 'JohnDoe');

// 读取数据
const username = localStorage.getItem('username');
console.log(username); // 输出 "JohnDoe"

// 删除数据
localStorage.removeItem('username');

实现拖拽功能

通过事件监听实现元素拖拽：

const draggable = document.getElementById('draggable');

draggable.addEventListener('mousedown', (e) => {
  const startX = e.clientX - draggable.getBoundingClientRect().left;
  const startY = e.clientY - draggable.getBoundingClientRect().top;

  function moveElement(e) {
    draggable.style.left = `${e.clientX - startX}px`;
    draggable.style.top = `${e.clientY - startY}px`;
  }

  document.addEventListener('mousemove', moveElement);

  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', moveElement);
  });
});

定时任务

使用 setInterval 或 setTimeout 执行定时操作：

// 每5秒执行一次
setInterval(() => {
  console.log('定时任务执行中');
}, 5000);

// 延迟3秒后执行
setTimeout(() => {
  alert('任务完成');
}, 3000);

实现模态框

通过控制 CSS 类名显示或隐藏弹窗：

js 实现功能实现

function openModal() {
  document.getElementById('modal').classList.add('active');
}

function closeModal() {
  document.getElementById('modal').classList.remove('active');
}

document.getElementById('open-btn').addEventListener('click', openModal);
document.getElementById('close-btn').addEventListener('click', closeModal);

以上示例涵盖了常见的 JavaScript 功能实现，可根据具体需求调整代码逻辑。