创建一个TodoList应用，可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：，，“
html，，，，，，Todo List，， body { font-family: Arial, sans-serif; }， #todolist { list-style-type: none; padding: 0; }， #todolist li { margin: 5px 0; }，，，，Todo List，，Add，，，， function addTask() {， const input = document.getElementById('newTask');， const newTask = input.value.trim();， if (newTask) {， const li = document.createElement('li');， li.textContent = newTask;， document.getElementById('todolist').appendChild(li);， input.value = '';， }， }，，，，“，，这个简单的TodoList应用允许用户输入任务并添加到列表中。你可以根据需要进一步扩展功能，例如添加删除任务或标记任务为完成的功能。在当今快节奏的生活中，有效地管理日常任务变得尤为重要，创建一个简单的待办事项列表（Todo List）可以帮助我们更好地组织和跟踪任务，本文将指导你如何使用JavaScript创建一个基本的Todo List应用，包括添加、删除和标记完成功能。
HTML结构
我们需要一个基本的HTML页面来放置我们的Todo List，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Todo List</h1>
<form id="todoForm">
<input type="text" id="todoInput" placeholder="Add new task..." required>
<button type="submit">Add Task</button>
</form>
<ul id="todoList"></ul>
</div>
<script src="app.js"></script>
</body>
</html> CSS样式
我们添加一些基本的CSS样式来美化我们的Todo List：
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
}
#todoForm {
margin-bottom: 20px;
}
#todoInput {
padding: 10px;
width: 70%;
margin-right: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#todoList {
list-style-type: none;
padding: 0;
}
.todoItem {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #e9ecef;
border-radius: 5px;
margin-bottom: 10px;
}
.todoItem.completed {
text-decoration: line-through;
background-color: #d1e7dd;
} JavaScript逻辑
我们编写JavaScript代码来实现Todo List的功能：
// app.js
document.addEventListener('DOMContentLoaded', () => {
const todoForm = document.getElementById('todoForm');
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');
todoForm.addEventListener('submit', (e) => {
e.preventDefault();
const newTask = todoInput.value.trim();
if (newTask) {
addTask(newTask);
todoInput.value = '';
}
});
function addTask(taskText) {
const li = document.createElement('li');
li.className = 'todoItem';
li.textContent = taskText;
li.addEventListener('click', () => markTaskCompleted(li));
li.addEventListener('contextmenu', (e) => {
e.preventDefault();
removeTask(li);
});
todoList.appendChild(li);
}
function markTaskCompleted(li) {
li.classList.toggle('completed');
}
function removeTask(li) {
todoList.removeChild(li);
}
}); 表格展示示例数据
| 任务名称 | 状态 | 操作 |
| 学习JavaScript | 已完成 | 删除 |
| 阅读书籍 | 未完成 | 标记为完成 |
| 健身 | 未完成 | 删除 |
| 写博客文章 | 未完成 | 标记为完成 |
| 整理房间 | 未完成 | 删除 |
相关问答FAQs
Q1: 如何添加新的待办事项？
A1: 在输入框中输入新的任务名称，然后点击“Add Task”按钮即可添加新的待办事项到列表中，如果输入框为空，则不会添加任何内容。
Q2: 如何删除已完成的任务？
A2: 你可以通过右键点击已完成的任务，选择上下文菜单中的“删除”选项来删除该任务，你也可以点击任务本身将其标记为未完成，然后再删除。
小编有话说
通过本文的学习，你已经掌握了如何使用HTML、CSS和JavaScript创建一个简单的Todo List应用，这个基础版本可以满足基本的任务管理需求，但你可以根据需要进一步扩展功能，例如添加持久化存储、分类管理、优先级设置等，希望这个小项目能够帮助你更好地管理和组织你的日常任务！
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1383342.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复