js页面实现
JavaScript 页面实现方法
在 JavaScript 中实现页面功能通常涉及 DOM 操作、事件处理和异步请求等。以下是几种常见的实现方式：
DOM 元素创建与操作
使用 document.createElement 创建新元素，通过 appendChild 添加到页面：
const div = document.createElement('div');
div.textContent = '动态创建的元素';
document.body.appendChild(div);事件监听与处理
通过 addEventListener 绑定交互事件：
const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
alert('按钮被点击');
});数据动态渲染
结合模板字符串动态生成 HTML：
const data = ['Apple', 'Banana', 'Orange'];
const list = document.querySelector('#fruitList');
list.innerHTML = data.map(item => `<li>${item}</li>`).join('');AJAX 数据获取
使用 fetch API 获取远程数据：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));表单处理
监听表单提交并获取输入值：
const form = document.querySelector('#myForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const inputValue = form.querySelector('input').value;
console.log('输入值:', inputValue);
});本地存储操作
使用 localStorage 保存用户数据：
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');响应式样式修改
通过 JavaScript 动态修改 CSS 样式：
const element = document.querySelector('.box');
element.style.backgroundColor = 'blue';
element.classList.add('active');定时器与动画
使用 setInterval 实现简单动画：
let pos = 0;
const box = document.querySelector('.animate-box');
const timer = setInterval(() => {
pos += 1;
box.style.left = pos + 'px';
if (pos > 100) clearInterval(timer);
}, 10);模块化开发
现代 JavaScript 支持模块化导入导出：
// utils.js
export function formatDate(date) {
return date.toLocaleString();
}
// main.js
import { formatDate } from './utils.js';
console.log(formatDate(new Date()));SPA 路由实现
简单的前端路由示例：
window.addEventListener('hashchange', () => {
const route = window.location.hash.slice(1);
document.querySelector('.content').innerHTML = `当前路由: ${route}`;
});这些方法涵盖了从基础 DOM 操作到现代前端开发的常见技术点，可根据实际需求选择合适的方式实现页面功能。
