首页 > 文章 > 前端

JavaScript实现待办事项应用教程

时间：2025-12-10 14:45:50 439浏览收藏

推广推荐

免费电影APP ➜

支持 PC / 移动端，安全直达

从现在开始，努力学习吧！本文《JavaScript实现简单待办事项应用实战》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

答案：该待办事项应用通过HTML、CSS和JavaScript实现任务的添加、删除和标记完成功能，支持回车添加、点击切换状态和删除操作，并可通过localStorage实现数据持久化。

使用JavaScript实现一个简单的待办事项应用_javascript实战

实现一个简单的待办事项应用是学习JavaScript的绝佳方式。它能帮助你掌握DOM操作、事件处理和基础的数据管理。下面是一个完整的、可运行的待办事项应用示例，包含添加、删除和标记完成任务的功能。

1. 页面结构（HTML）

首先创建一个基本的HTML页面，包含输入框、添加按钮和待办事项列表：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>简单待办事项应用</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>待办事项</h1>
    &lt;input type=&quot;text&quot; id=&quot;taskInput&quot; placeholder=&quot;输入新任务...&quot; /&gt;
    <button id="addBtn">添加</button>
    <ul id="taskList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. 样式设计（CSS）

为应用添加一些基础样式，使其更美观：

.container {
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}
h1 {
  text-align: center;
}
#taskInput {
  width: 70%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#addBtn {
  padding: 10px 15px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#addBtn:hover {
  background-color: #0056b3;
}
ul {
  list-style-type: none;
  padding: 0;
  margin-top: 20px;
}
li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
li.completed {
  text-decoration: line-through;
  color: #888;
}
.delete-btn {
  color: red;
  cursor: pointer;
}

3. 核心功能（JavaScript）

在script.js中编写逻辑代码，实现添加、删除和切换任务状态的功能：

// 获取DOM元素
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');

// 存储任务的数组
let tasks = [];

// 添加任务函数
function addTask() {
  const taskText = taskInput.value.trim();
  if (taskText === '') return;

  // 创建任务对象
  const newTask = {
    id: Date.now(),
    text: taskText,
    completed: false
  };

  // 添加到数组
  tasks.push(newTask);

  // 清空输入框
  taskInput.value = '';

  // 更新界面
  renderTasks();
}

// 渲染任务列表
function renderTasks() {
  taskList.innerHTML = '';
  tasks.forEach(task => {
    const li = document.createElement('li');
    if (task.completed) {
      li.classList.add('completed');
    }

    // 显示任务文本
    const span = document.createElement('span');
    span.textContent = task.text;
    span.addEventListener('click', () => toggleTask(task.id));
    li.appendChild(span);

    // 删除按钮
    const deleteBtn = document.createElement('span');
    deleteBtn.textContent = '✖';
    deleteBtn.className = 'delete-btn';
    deleteBtn.addEventListener('click', () => deleteTask(task.id));

    li.appendChild(deleteBtn);
    taskList.appendChild(li);
  });
}

// 切换任务完成状态
function toggleTask(id) {
  tasks = tasks.map(task =>
    task.id === id ? { ...task, completed: !task.completed } : task
  );
  renderTasks();
}

// 删除任务
function deleteTask(id) {
  tasks = tasks.filter(task => task.id !== id);
  renderTasks();
}

// 事件监听
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', e => {
  if (e.key === 'Enter') {
    addTask();
  }
});

4. 功能说明

这个待办事项应用具备以下特性：

添加任务：输入内容后点击“添加”或按回车键即可新增任务
标记完成：点击任务文字可切换完成状态，已完成任务会显示删除线
删除任务：点击右侧的“✖”按钮可删除对应任务
数据持久化（进阶）：可通过localStorage保存任务，刷新页面不丢失

如果需要持久化存储，可在addTask、toggleTask和deleteTask末尾添加：

localStorage.setItem('tasks', JSON.stringify(tasks));

并在页面加载时读取：

if (localStorage.getItem('tasks')) {
  tasks = JSON.parse(localStorage.getItem('tasks'));
  renderTasks();
}

基本上就这些。这是一个简洁实用的JavaScript待办事项应用，适合初学者理解和扩展。

终于介绍完啦！小伙伴们，这篇关于《JavaScript实现待办事项应用教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

待办事项