用一个待办事项应用入门Web开发示例程序

从零开始做一个能用的网页

刚学Web开发时，总想找点实际的东西练手。光看教程记不住，不如直接写个小应用。待办事项（To-Do List）就是个不错的起点——功能简单，但涵盖了HTML、CSS和JavaScript的核心用法，还能顺便理解用户交互的基本逻辑。

这个小程序不需要后台，浏览器打开就能用。你可以把它当成你的第一个“作品”，以后加功能也好，拿去面试展示也行。

结构：用HTML搭骨架

先写页面结构。我们只需要一个输入框、一个按钮，再加一个列表显示任务。

<div class="container">
  <h1>我的待办事项</h1>
  <input type="text" id="taskInput" placeholder="输入新任务">
  <button id="addBtn">添加</button>
  <ul id="taskList"></ul>
</div>

样式：让页面不那么难看

默认的输入框和按钮太原始。加点CSS，至少看起来像个正经网页。

.container {
  max-width: 500px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

#taskInput {
  padding: 10px;
  width: 70%;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#addBtn {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#addBtn:hover {
  background-color: #0056b3;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  margin: 5px 0;
  background-color: #f9f9f9;
  border-left: 3px solid #007bff;
}

li.completed {
  text-decoration: line-through;
  opacity: 0.7;
}

交互：让页面动起来

现在页面能看了，但点按钮没反应。加上JavaScript，让它能真正干活。

目标是：输入文字，点“添加”，任务就出现在列表里；点击任务项，可以标记为完成。

document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('taskInput');
  const addBtn = document.getElementById('addBtn');
  const list = document.getElementById('taskList');

  addBtn.addEventListener('click', function() {
    const taskText = input.value.trim();
    if (taskText === '') return;

    const li = document.createElement('li');
    li.textContent = taskText;

    li.addEventListener('click', function() {
      this.classList.toggle('completed');
    });

    list.appendChild(li);
    input.value = '';
    input.focus();
  });
});

这段代码等页面加载完再执行。绑定按钮点击事件，取输入值，创建列表项，再加点击切换样式的功能。清空输入框，让用户能继续录入下一条。

下一步可以怎么改

这个例子只是起点。你可以试着加些新功能，比如按回车添加任务、双击删除任务、把数据存到localStorage避免刷新丢失。每个改动都能让你对DOM操作、事件处理和本地存储有更深的理解。

很多复杂的Web应用，最初也就是从这样一个小列表开始的。别小看它，动手写一遍，比看十篇理论文章都管用。