用js写的经典项目

以下是一些用 JavaScript 编写的经典项目示例：

1. Todo List（待办事项列表）

基础概念：这是一个常见的用于管理任务的应用，涉及到用户输入任务的添加、删除、标记完成等功能。
优势：简单易懂，适合初学者练习基本的 DOM 操作和事件处理。
应用场景：个人任务管理、小型团队协作等。
示例代码：

// 获取元素
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（天气应用）

基础概念：通过调用天气 API 获取实时天气数据，并在页面上展示。
优势：可以学习如何进行网络请求和处理 JSON 数据。
应用场景：方便用户随时查看天气情况。
示例代码（假设已有获取天气数据的 API）：

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 经典项目中的一部分，通过实践这些项目，可以提升您的编程技能和解决问题的能力。