怎样用js脚本制作简易待办事项_js待办清单功能脚本编写教程
答案：用HTML、CSS和JavaScript可实现一个简易待办事项清单，通过DOM操作完成增删改查功能，结合localStorage可持久化数据，适合初学者掌握前端交互基础。
用 JavaScript 制作一个简易待办事项清单并不复杂，只需要 HTML、CSS 和 JS 三者配合就能实现基本的增删改查功能。下面是一个完整的脚本编写教程，帮助你快速上手实现一个可交互的待办清单。
1. 页面结构（HTML）
先搭建基础的页面结构，包含输入框、添加按钮和待办事项列表：
我的待办事项
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;
}
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. 核心功能（JavaScript）
这是最关键的一步，用 JS 实现添加、删除、标记完成等功能。
// 获取 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(); // 回车添加
});
4. 功能扩展建议
这个基础版本已经具备核心功能，你可以继续优化：
- 本地存储：使用 localStorage 保存任务，刷新不丢失。
- 编辑功能：双击任务文字可修改内容。
- 分类或优先级：给任务加标签或颜色区分重要性。
- 统计未完成数量：显示还有多少任务待处理。
基本上就这些。只要掌握 DOM 操作和数组处理，一个实用的待办清单就能快速跑起来。你可以把上面代码整合进一个 HTML 文件测试，逐步调试完善。不复杂但容易忽略细节，比如输入校验和事件绑定时机。
