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

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

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

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

1. 页面结构（HTML）

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




  <meta charset="UTF-8"><title>简单待办事项应用</title><link rel="stylesheet" href="style.css"><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>

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中编写逻辑代码，实现添加、删除和切换任务状态的功能：

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

// 获取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待办事项应用，适合初学者理解和扩展。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南