怎样用js脚本制作简易待办事项_js待办清单功能脚本编写教程

技术教程
2025-11-15 23:03:25

答案：用HTML、CSS和J*aScript可实现一个简易待办事项清单，通过DOM操作完成增删改查功能，结合localStorage可持久化数据，适合初学者掌握前端交互基础。

用 J*aScript 制作一个简易待办事项清单并不复杂，只需要 HTML、CSS 和 JS 三者配合就能实现基本的增删改查功能。下面是一个完整的脚本编写教程，帮助你快速上手实现一个可交互的待办清单。

1. 页面结构（HTML）

先搭建基础的页面结构，包含输入框、添加按钮和待办事项列表：

<div id="todo-app">
  <h2>我的待办事项</h2>
  <input type="text" id="task-input" placeholder="输入新任务">
  <button id="add-btn">添加</button>
  <ul id="task-list"></ul>
</div>

2. 样式美化（CSS 可选）

为了让界面更清晰，可以加一点简单的样式：

#todo-app {
  max-width: 400px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
#task-input {
  padding: 8px;
  width: 70%;
}
#add-btn {
  padding: 8px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
#add-btn:hover {
  background: #0056b3;
}
#task-list li {
  margin: 5px 0;
  padding: 8px;
  background: #f9f9f9;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
#task-list li.completed {
  text-decoration: line-through;
  opacity: 0.6;
}

3. 核心功能（J*aScript）

这是最关键的一步，用 JS 实现添加、删除、标记完成等功能。

标贝AI虚拟主播

一站式虚拟主播视频生产和编辑平台

69 查看详情标贝AI虚拟主播

// 获取 DOM 元素
const taskInput = document.getElementById('task-input');
const addBtn = document.getElementById('add-btn');
const taskList = document.getElementById('task-list');

// 存储任务列表（初始为空）
let tasks = [];

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

    // 显示任务文本
    const taskText = document.createElement('span');
    taskText.textContent = task.text;
    taskText.addEventListener('click', () => toggleComplete(index)); // 点击切换完成状态
    li.appendChild(taskText);

    // 删除按钮
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.onclick = () => deleteTask(index);
    li.appendChild(deleteBtn);

    taskList.appendChild(li);
  });
}

// 添加新任务
function addTask() {
  const text = taskInput.value.trim();
  if (text === '') return; // 避免空任务

  tasks.push({ text, completed: false });
  taskInput.value = ''; // 清空输入框
  renderTasks(); // 重新渲染
}

// 切换完成状态
function toggleComplete(index) {
  tasks[index].completed = !tasks[index].completed;
  renderTasks();
}

// 删除任务
function deleteTask(index) {
  tasks.splice(index, 1);
  renderTasks();
}

// 绑定事件
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTask(); // 回车添加
});