js功能实现
JavaScript 实现常见功能的方法
DOM 操作
通过 JavaScript 可以动态修改网页内容。例如，使用 document.getElementById() 获取元素，再通过 innerHTML 或 textContent 修改内容。
事件处理
使用 addEventListener 可以为元素绑定事件。例如点击按钮触发函数：
document.querySelector('button').addEventListener('click', function() {
alert('按钮被点击');
});AJAX 请求
通过 fetch 或 XMLHttpRequest 可以实现异步数据请求。现代推荐使用 fetch：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));表单验证 在表单提交前进行验证：
document.forms['myForm'].addEventListener('submit', function(event) {
if (!this.elements['email'].value.includes('@')) {
event.preventDefault();
alert('请输入有效的邮箱');
}
});本地存储
使用 localStorage 可以在浏览器中存储数据：
localStorage.setItem('username', 'John');
console.log(localStorage.getItem('username'));定时器
setTimeout 和 setInterval 用于延迟执行或重复执行代码：
setTimeout(() => console.log('3秒后执行'), 3000);
setInterval(() => console.log('每秒执行'), 1000);动画效果 通过改变 CSS 属性实现简单动画：
let element = document.getElementById('animate');
let pos = 0;
let id = setInterval(frame, 10);
function frame() {
if (pos == 350) clearInterval(id);
else {
pos++;
element.style.top = pos + 'px';
element.style.left = pos + 'px';
}
}ES6+ 特性 现代 JavaScript 支持箭头函数、模板字符串、解构等特性：
const [a, b] = [1, 2];
const greet = name => `Hello, ${name}`;
console.log(greet('World'));
