js 实现功能实现
使用 JavaScript 实现常见功能
动态加载数据
通过 fetch 或 axios 从 API 获取数据并渲染到页面：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
const container = document.getElementById('data-container');
data.forEach(item => {
const element = document.createElement('div');
element.textContent = item.name;
container.appendChild(element);
});
})
.catch(error => console.error('Error:', error));表单验证
监听表单提交事件并检查输入合法性：
document.getElementById('form').addEventListener('submit', (event) => {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
if (!email.includes('@')) {
alert('请输入有效的邮箱地址');
event.preventDefault();
}
if (password.length < 6) {
alert('密码长度至少为6位');
event.preventDefault();
}
});实现轮播图
使用 CSS 和 JavaScript 创建简单的轮播效果：
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
function showSlide(index) {
slides.forEach((slide, i) => {
slide.style.display = i === index ? 'block' : 'none';
});
}
document.getElementById('next').addEventListener('click', () => {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
});
document.getElementById('prev').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
});
showSlide(0); // 初始显示第一张本地存储数据
使用 localStorage 保存用户数据：
// 存储数据
localStorage.setItem('username', 'JohnDoe');
// 读取数据
const username = localStorage.getItem('username');
console.log(username); // 输出 "JohnDoe"
// 删除数据
localStorage.removeItem('username');实现拖拽功能
通过事件监听实现元素拖拽：
const draggable = document.getElementById('draggable');
draggable.addEventListener('mousedown', (e) => {
const startX = e.clientX - draggable.getBoundingClientRect().left;
const startY = e.clientY - draggable.getBoundingClientRect().top;
function moveElement(e) {
draggable.style.left = `${e.clientX - startX}px`;
draggable.style.top = `${e.clientY - startY}px`;
}
document.addEventListener('mousemove', moveElement);
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', moveElement);
});
});定时任务
使用 setInterval 或 setTimeout 执行定时操作：
// 每5秒执行一次
setInterval(() => {
console.log('定时任务执行中');
}, 5000);
// 延迟3秒后执行
setTimeout(() => {
alert('任务完成');
}, 3000);实现模态框
通过控制 CSS 类名显示或隐藏弹窗：
function openModal() {
document.getElementById('modal').classList.add('active');
}
function closeModal() {
document.getElementById('modal').classList.remove('active');
}
document.getElementById('open-btn').addEventListener('click', openModal);
document.getElementById('close-btn').addEventListener('click', closeModal);以上示例涵盖了常见的 JavaScript 功能实现，可根据具体需求调整代码逻辑。
