能用js实现的 最终用js实现
使用 JavaScript 实现功能
JavaScript 是一种多用途的编程语言，适用于前端、后端以及各种自动化任务。以下是一些常见的功能及其实现方式。
动态 DOM 操作
通过 JavaScript 可以动态修改网页内容，例如添加、删除或修改 HTML 元素。
// 创建新元素并插入到 DOM
const newElement = document.createElement('div');
newElement.textContent = '动态添加的内容';
document.body.appendChild(newElement);
// 修改现有元素
const existingElement = document.getElementById('target');
existingElement.style.color = 'red'; 异步数据请求（AJAX / Fetch）
使用 fetch API 可以轻松地从服务器获取数据。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('请求失败:', error)); 事件监听与处理
JavaScript 可以监听用户交互事件，如点击、键盘输入等。
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('按钮被点击了！');
}); 本地存储（localStorage / sessionStorage）
利用 localStorage 可以在浏览器中存储数据，即使页面刷新后仍然存在。
// 存储数据
localStorage.setItem('username', 'JohnDoe');
// 读取数据
const username = localStorage.getItem('username');
console.log(username); // 输出 "JohnDoe" 定时任务（setTimeout / setInterval）
可以设定延迟执行或周期性执行的任务。
// 延迟 3 秒后执行
setTimeout(() => {
console.log('3 秒后执行');
}, 3000);
// 每隔 1 秒执行一次
const intervalId = setInterval(() => {
console.log('每隔 1 秒执行');
}, 1000);
// 5 秒后停止定时器
setTimeout(() => {
clearInterval(intervalId);
}, 5000); 表单验证
JavaScript 可以实时验证用户输入，提高交互体验。
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
const input = document.querySelector('input[type="text"]');
if (input.value.trim() === '') {
event.preventDefault();
alert('请输入内容！');
}
}); 动画效果
结合 CSS 或 requestAnimationFrame 可以实现流畅的动画效果。
const box = document.querySelector('.box');
let position = 0;
function animate() {
position += 1;
box.style.left = position + 'px';
if (position < 200) {
requestAnimationFrame(animate);
}
}
animate(); 模块化开发（ES6 Modules）
现代 JavaScript 支持模块化开发，便于代码组织。
// math.js
export function add(a, b) {
return a + b;
}
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 输出 5 JavaScript 的功能非常广泛，涵盖 Web 开发、Node.js 后端、游戏开发等多个领域，几乎所有现代 Web 应用都依赖 JavaScript 实现交互逻辑。
