使用 JavaScript 制作 To-Do List

本文记录了使用 HTML、CSS 和 JavaScript 制作一个简单的 To-Do List 网页的全过程，包含功能描述、代码实现以及优化方向。

**🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

文章目录

使用 JavaScript 制作 To-Do List
- 功能描述
- 页面效果
代码实现
- HTML 部分
- css部分
- js部分
- 最终效果

功能描述

添加任务：用户可以输入任务内容，并将其添加到任务列表中。
删除任务：用户可以删除已完成的任务。
标记任务完成：点击任务可以标记为完成或未完成状态。

页面效果

页面包含以下元素：

一个输入框，用于输入任务内容。
一个按钮，用于将任务添加到列表中。
一个任务列表，用于展示所有任务。

代码实现

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>To-Do List</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="todo-container"><h1>To-Do List</h1><div class="input-section"><input type="text" id="task-input" placeholder="请输入任务..."><button id="add-task-btn">添加任务</button></div><ul id="task-list"></ul></div><script src="script.js"></script>
</body>
</html>

css部分

body {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;
}.todo-container {background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);width: 300px;text-align: center;
}h1 {color: #333;margin-bottom: 20px;
}.input-section {display: flex;gap: 10px;margin-bottom: 20px;
}#task-input {flex: 1;padding: 8px;border: 1px solid #ddd;border-radius: 4px;
}#add-task-btn {padding: 8px 12px;background: #5cb85c;color: white;border: none;border-radius: 4px;cursor: pointer;
}#add-task-btn:hover {background: #4cae4c;
}#task-list {list-style-type: none;padding: 0;
}.task-item {display: flex;justify-content: space-between;align-items: center;padding: 10px;margin-bottom: 10px;background: #f9f9f9;border-radius: 4px;border: 1px solid #ddd;
}.task-item.completed {text-decoration: line-through;color: #aaa;
}.task-item button {background: #d9534f;color: white;border: none;border-radius: 4px;cursor: pointer;padding: 5px 8px;
}.task-item button:hover {background: #c9302c;
}

js部分

// 获取 DOM 元素
const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task-btn');
const taskList = document.getElementById('task-list');// 添加任务
addTaskBtn.addEventListener('click', () => {const taskText = taskInput.value.trim();if (taskText === '') {alert('任务内容不能为空！');return;}// 创建任务项const taskItem = document.createElement('li');taskItem.classList.add('task-item');// 任务文本const taskContent = document.createElement('span');taskContent.textContent = taskText;taskItem.appendChild(taskContent);// 完成按钮taskItem.addEventListener('click', () => {taskItem.classList.toggle('completed');});// 删除按钮const deleteBtn = document.createElement('button');deleteBtn.textContent = '删除';deleteBtn.addEventListener('click', () => {taskList.removeChild(taskItem);});taskItem.appendChild(deleteBtn);// 将任务项添加到列表taskList.appendChild(taskItem);// 清空输入框taskInput.value = '';
});