js脚步实现

使用 JavaScript 实现常见功能

事件监听

通过 addEventListener 方法绑定事件，例如点击按钮触发操作：

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

数据获取

使用 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.getElementById('content').innerHTML = '<p>新内容已加载</p>';

表单验证

在提交表单前验证用户输入：

document.getElementById('myForm').addEventListener('submit', function(event) {
    const input = document.getElementById('username').value;
    if (input.length < 3) {
        event.preventDefault();
        alert('用户名至少需要3个字符');
    }
});

定时操作

使用 setTimeout 延迟执行代码：

setTimeout(function() {
    console.log('这段代码将在2秒后执行');
}, 2000);

本地存储

利用 localStorage 存储用户数据：

localStorage.setItem('userPref', 'darkMode');
const preference = localStorage.getItem('userPref');
console.log(preference); // 输出: darkMode

动画效果

通过 CSS 和 JavaScript 实现简单动画：

const box = document.getElementById('animatedBox');
box.style.transition = 'transform 1s';
box.style.transform = 'translateX(100px)';