当前位置：首页 > JavaScript

js实现功能

2026-04-03 21:21:23JavaScript

JavaScript 实现常见功能的方法

实现页面元素动态加载

使用 document.createElement 和 appendChild 方法动态添加元素到 DOM：

const newElement = document.createElement('div');
newElement.textContent = '动态添加的内容';
document.body.appendChild(newElement);

实现AJAX数据请求

使用 fetch API 进行异步数据请求：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

实现事件监听

为元素添加事件监听器：

document.getElementById('myButton').addEventListener('click', function() {
  alert('按钮被点击');
});

实现表单验证

基本的表单验证示例：

document.querySelector('form').addEventListener('submit', function(event) {
  const input = document.getElementById('email');
  if (!input.value.includes('@')) {
    event.preventDefault();
    alert('请输入有效的邮箱地址');
  }
});

实现本地存储

使用 localStorage 存储和获取数据：

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

// 获取数据
const username = localStorage.getItem('username');
console.log(username);

实现定时器功能

使用 setTimeout 和 setInterval：

// 单次定时
setTimeout(() => {
  console.log('3秒后执行');
}, 3000);

// 循环定时
const intervalId = setInterval(() => {
  console.log('每秒执行一次');
}, 1000);

// 清除定时器
clearInterval(intervalId);

实现数组操作

常见的数组操作方法：

const numbers = [1, 2, 3, 4, 5];

// 过滤
const even = numbers.filter(n => n % 2 === 0);

// 映射
const squared = numbers.map(n => n * n);

// 查找
const found = numbers.find(n => n > 3);

实现对象操作

对象的基本操作：

js实现功能

const person = {
  name: 'Alice',
  age: 25,
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

// 访问属性
console.log(person.name);

// 调用方法
person.greet();

// 添加新属性
person.job = 'Developer';