纯JavaScript创建一个简单的待办事项列表
作者：刻刻帝的海角
这篇文章主要给大家介绍了关于纯JavaScript创建一个简单的待办事项列表的相关资料,清单通常用于记录我们在某一天需要完成的所有事项,将最关键的任务放在最上方,将最不重要的事项放在最下方,需要的朋友可以参考下
前言
在现代的web开发中，待办事项列表是一个常见且实用的功能。它允许用户记录、追踪和完成他们的任务。在这篇文章中，我们将使用纯JavaScript来创建一个简单的待办事项列表。我们会涉及到HTML结构的创建、CSS样式的添加以及JavaScript交互的实现。
步骤1： 创建HTML结构
首先，我们需要在HTML文件中定义待办事项列表的结构。我们可以使用一个输入框让用户输入任务，一个按钮来添加任务，以及一个无序列表来显示任务。
<!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" rel="external nofollow" >
</head>
<body>
<div class="container">
<h1>Todo List</h1>
<input type="text" id="todoInput" placeholder="Enter a new todo">
<button id="addButton">Add Todo</button>
<ul id="todoList">
</ul>
</div>
<script src="script.js"></script>
</body>
</html>步骤2： 添加CSS样式
接下来，我们可以在一个单独的CSS文件中添加一些样式来美化我们的待办事项列表。例如，我们可以为输入框、按钮和列表项添加样式
/* styles.css */
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
background-color: #F8F9FA;
margin-bottom: 5px;
}步骤3： 使用JavaScript实现交互功能
最后，我们需要在JavaScript文件中编写代码来实现待办事项的添加和显示功能。我们可以通过为按钮添加一个事件监听器来实现这一点，当按钮被点击时，获取输入框的值，创建一个新的列表项，并将其添加到列表中。
// script.js
document.addEventListener('DOMContentLoaded', function() {
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');
addButton.addEventListener('click', function() {
const todoText = todoInput.value.trim(); // 获取输入框的值并去除前后的空格
if (todoText) { // 如果输入框的值不为空
const listItem = document.createElement('li'); // 创建一个新的列表项元素li
listItem.textContent = todoText; // 设置列表项的文本内容为输入框的值
todoList.appendChild(listItem); // 将新的列表项添加到无序列表ul中
todoInput.value = ''; // 清空输入框的值以便用户输入下一个待办事项
} else {
alert('Please enter a valid todo'); // 如果输入框的值为空，则显示一个警告消息提醒用户输入有效的待办事项内容。注意这里只是一个简单的错误处理，实际开发中可能需要更友好的用户体验设计。
}
});
});现在，当你打开HTML文件时，你应该能够看到一个简单的待办事项列表应用程序。你可以在输入框中输入任务，点击按钮将其添加到列表中。每个任务都会作为一个新的列表项显示在列表中。当然，这只是一个基本示例，你可以根据自己的需求扩展它，例如添加删除任务的功能、标记任务为已完成的功能等。希望这篇文章能帮助你了解如何使用JavaScript创建一个待办事项列表！
总结
到此这篇关于纯JavaScript创建一个简单的待办事项列表的文章就介绍到这了,更多相关JS创建待办事项列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！