在这篇文章中，我们将学习如何使用JavaScript来实现一个简单的待办事项应用，这个应用将允许用户添加、删除和标记完成待办事项，我们将使用HTML、CSS和JavaScript来完成这个项目。
我们需要创建HTML结构，在这个例子中，我们将创建一个包含一个输入框、一个按钮和一个列表的结构，用户可以在输入框中输入待办事项，点击按钮将其添加到列表中，然后再次点击按钮将其从列表中删除，当用户点击列表中的待办事项时，它将被标记为已完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项应用</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>待办事项应用</h1>
<input type="text" id="todoInput" placeholder="输入待办事项">
<button id="addTodo">添加</button>
<ul id="todoList"></ul>
<script src="scripts.js"></script>
</body>
</html>
接下来，我们需要编写CSS样式来美化我们的应用，在这个例子中，我们将为列表项添加一些基本的样式。
/* styles.css */
body {
font-family: Arial, sans-serif;
}
#todoList {
list-style-type: none;
padding: 0;
}
#todoList li {
background-color: #f1f1f1;
padding: 10px;
margin-bottom: 5px;
}
#todoList li.completed {
text-decoration: line-through;
}
现在我们可以开始编写JavaScript代码来实现应用的功能了，我们需要获取HTML元素并将其存储在变量中，以便稍后使用，我们需要为“添加”按钮添加一个事件监听器，以便在用户点击按钮时执行相应的操作，我们需要为列表项添加事件监听器，以便在用户点击列表项时将其标记为已完成。
// scripts.js
const todoInput = document.getElementById('todoInput');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');
let todos = [];
addTodoButton.addEventListener('click', () => {
const newTodo = todoInput.value.trim();
if (newTodo) {
todos.push({ text: newTodo, completed: false });
updateTodoList();
todoInput.value = '';
} else {
alert('请输入待办事项');
}
});
function updateTodoList() {
todoList.innerHTML = '';
todos.forEach((todo, index) => {
const listItem = document.createElement('li');
listItem.textContent = todo.text;
listItem.classList.toggle('completed', todo.completed);
listItem.addEventListener('click', () => {
todos[index].completed = !todos[index].completed;
updateTodoList();
});
todoList.appendChild(listItem);
});
}
现在我们已经完成了一个简单的待办事项应用，用户可以在输入框中输入待办事项，点击按钮将其添加到列表中，然后再次点击按钮将其从列表中删除，当用户点击列表中的待办事项时，它将被标记为已完成。
发表评论