以下是一些用 JavaScript 编写的经典项目示例:
1. Todo List(待办事项列表)
// 获取元素
const addButton = document.getElementById('add');
const taskList = document.getElementById('task-list');
// 添加任务
addButton.addEventListener('click', () => {
const taskInput = document.getElementById('task-input').value;
if (taskInput) {
const li = document.createElement('li');
li.textContent = taskInput;
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.addEventListener('click', () => {
taskList.removeChild(li);
});
li.appendChild(deleteButton);
taskList.appendChild(li);
document.getElementById('task-input').value = '';
}
});
2. Weather App(天气应用)
fetch('your-weather-api-url')
.then(response => response.json())
.then(data => {
const temperature = document.getElementById('temperature');
temperature.textContent = data.temperature;
const description = document.getElementById('description');
description.textContent = data.description;
})
.catch(error => console.error('Error fetching weather data:', error));
3. Calculator(计算器)
const buttons = document.querySelectorAll('.btn');
const display = document.getElementById('display');
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (value === '=') {
display.value = eval(display.value);
} else {
display.value += value;
}
});
});
4. Image Gallery(图片画廊)
const images = document.querySelectorAll('.gallery img');
let currentIndex = 0;
function showImage(index) {
images.forEach((img, i) => {
img.style.display = i === index? 'block' : 'none';
});
}
images.forEach((img, index) => {
img.addEventListener('click', () => {
currentIndex = index;
showImage(currentIndex);
});
});
// 自动切换图片
setInterval(() => {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}, 3000);
这些只是 JavaScript 经典项目中的一部分,通过实践这些项目,可以提升您的编程技能和解决问题的能力。
没有搜到相关的文章