使用 JavaScript、HTML 和 CSS：
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.todo-list {
list-style-type: none;
padding: 0;
}
.todo-item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.todo-item:last-child {
border-bottom: none;
}
.todo-item.completed {
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="container">
<h1>Todo List</h1>
<input type="text" id="todoInput" placeholder="Add new todo...">
<button onclick="addTodo()">Add Todo</button>
<ul class="todo-list">
<!-- Todo items will be added here -->
</ul>
</div>
<script>
function addTodo() {
const todoInput = document.getElementById("todoInput");
const todoText = todoInput.value;
if (todoText !== "") {
const listItem = document.createElement("li");
listItem.classList.add("todo-item");
listItem.textContent = todoText;
listItem.onclick = function () {
this.classList.toggle("completed");
updateTodoList();
};
document.getElementById("todoInput").value = "";
document.querySelector(".todo-list").appendChild(listItem);
updateTodoList();
}
}
function updateTodoList() {
const todoList = document.querySelector(".todo-list");
const todoItems = todoList.getElementsByTagName("li");
for (let i = 0; i < todoItems.length; i++) {
if (todoItems[i].classList.contains("completed")) {
todoList.removeChild(todoItems[i]);
i--; // Decrement i because the current item was removed and the index has changed
} else {
break; // No need to continue if all items are completed
}
}
}
</script>
</body>
</html>
这个 Todo 小程序具有以下功能：
在输入框中输入待办事项，点击 "Add Todo" 按钮将其添加到列表中。
点击待办事项的行，可以将其标记为已完成（文本下面划线）或未完成。
本站部分内容转载自网络，如有侵权，可 联系站长 作删除处理。
苏公网安备 32068202000413号
苏ICP备18030026号-5