在现代的Web开发中，JavaScript已经成为了一种必不可少的编程语言，它不仅可以帮助我们实现网页的动态效果，还可以帮助我们处理用户的操作和数据，在这篇文章中，我们将使用JavaScript来实现一个简易的待办事项列表。
我们需要创建一个HTML文件，用于显示我们的待办事项列表，在这个文件中，我们需要一个输入框，用于用户输入待办事项；一个按钮，用于用户添加待办事项；以及一个ul元素，用于显示所有的待办事项。
<!DOCTYPE html>
<html>
<head>
<title>待办事项列表</title>
</head>
<body>
<h1>待办事项列表</h1>
<input type="text" id="todoInput" placeholder="请输入待办事项">
<button onclick="addTodo()">添加</button>
<ul id="todoList"></ul>
<script src="todo.js"></script>
</body>
</html>
接下来，我们需要创建一个JavaScript文件，用于处理用户的输入和操作，在这个文件中，我们需要定义一个空的数组，用于存储所有的待办事项；一个函数，用于添加待办事项到数组中；以及一个函数，用于将数组中的待办事项显示到页面上。
let todos = [];
function addTodo() {
let todoInput = document.getElementById('todoInput');
let todoText = todoInput.value;
if (todoText) {
todos.push(todoText);
displayTodos();
todoInput.value = '';
} else {
alert('请输入待办事项');
}
}
function displayTodos() {
let todoList = document.getElementById('todoList');
todoList.innerHTML = '';
for (let i = 0; i < todos.length; i++) {
let todoItem = document.createElement('li');
todoItem.textContent = todos[i];
todoList.appendChild(todoItem);
}
}
在这个代码中，我们首先获取了用户输入的待办事项，然后将其添加到了todos数组中，我们调用了displayTodos函数，将数组中的待办事项显示到了页面上，我们将输入框的值清空，以便用户可以输入下一个待办事项。
这就是我们使用JavaScript实现的一个简易的待办事项列表，虽然这个列表非常简单，但是它已经包含了JavaScript的基本操作，如获取元素、操作DOM、处理事件等，通过学习这个例子，我们可以更好地理解JavaScript的使用方式，为我们后续的学习打下坚实的基础。
发表评论