使用 JavaScript 制作 To-Do List
本文记录了使用 HTML、CSS 和 JavaScript 制作一个简单的 To-Do List 网页的全过程，包含功能描述、代码实现以及优化方向。
**🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏
@[toc]
功能描述
- 添加任务：用户可以输入任务内容，并将其添加到任务列表中。
- 删除任务：用户可以删除已完成的任务。
- 标记任务完成：点击任务可以标记为完成或未完成状态。
页面效果
页面包含以下元素：
- 一个输入框，用于输入任务内容。
- 一个按钮，用于将任务添加到列表中。
- 一个任务列表，用于展示所有任务。
代码实现
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 = '';
});
最终效果
Hi👋,这里是瑞雨溪一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我,我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉
