使用JavaScript实现一个简单的待办事项应用_javascript实战-js教程-PHP中文网

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

狼影

发布： 2025-11-17 15:55:02

原创

706人浏览过

答案：该待办事项应用通过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>
    <input type="text" id="taskInput" placeholder="输入新任务..." />
    <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中编写逻辑代码，实现添加、删除和切换任务状态的功能：

立即学习“Java免费学习笔记（深入）”；

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

// 获取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实现一个简单的待办事项应用_javascript实战的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

使用JavaScript实现一个简单的待办事项应用_javascript实战优化前端事件处理：使用事件委托动态管理元素状态 React useState 点击事件中引用状态值未更新的问题解析使用 jQuery 动态创建变量并响应点击事件 JS如何实现选项卡_JavaScript选项卡切换效果实现与交互方法