当前位置：首页 > JavaScript

js代码实现

2026-04-06 23:47:25JavaScript

使用 Fetch API 获取数据

Fetch API 提供了一种简单方式发送异步请求并处理响应。

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

操作 DOM 元素

通过 document.querySelector 或 getElementById 获取元素并修改内容。

const element = document.getElementById('demo');
element.textContent = 'Hello, World!';

事件监听

使用 addEventListener 绑定点击或其他交互事件。

js代码实现

document.querySelector('button').addEventListener('click', () => {
  alert('Button clicked!');
});

定时器功能

通过 setTimeout 或 setInterval 实现延迟或周期性任务。

setTimeout(() => {
  console.log('Executed after 2 seconds');
}, 2000);

本地存储

利用 localStorage 或 sessionStorage 存储用户数据。

js代码实现

localStorage.setItem('key', 'value');
const storedValue = localStorage.getItem('key');

动态创建元素

使用 document.createElement 动态生成 DOM 节点并插入页面。

const newDiv = document.createElement('div');
newDiv.textContent = 'Dynamic Content';
document.body.appendChild(newDiv);

表单验证

通过监听表单提交事件并检查输入值实现验证逻辑。

document.querySelector('form').addEventListener('submit', (event) => {
  const input = document.querySelector('input');
  if (!input.value) {
    event.preventDefault();
    alert('Input is required!');
  }
});