纯JavaScript创建一个简单的待办事项列表
更新时间：2024年01月05日 11:27:49 作者：刻刻帝的海角
这篇文章主要给大家介绍了关于纯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创建待办事项列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了小程序canvas实现画布半圆环，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
我们要判断一个全局对象myObj是否存在，如果不存在，就对它进行声明，Juriy Zaytsev指出判断一个Javascript对象是否存在，有超过50种写法，下面为大家介绍几种比较常用的，感兴趣的朋友可以参考下2013-09-09
js实现鼠标拖动图片做了兼容IE，FF火狐，谷歌等主流浏览器，具体实现代码如下，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-06-06
这篇文章主要介绍了JavaScript实现的使用键盘控制人物走动实例,也可说是一个JS实现的小人走动小游戏,需要的朋友可以参考下2014-08-08
在JavaScript世界里,类型判断就像给变量验明正身,只有摸清每个变量的身份,才能避免代码里的乌龙事件,所以本文结合实操代码给大家介绍了JavaScript类型判断不用愁的4种方法,需要的朋友可以参考下2026-03-03
JSChart是一个轻量级的在线图表生成工具，本身十分小巧，简单易用，相对来讲功能也不是特别强大，但是对于一些要求不高的应用来讲已经够用了，最近两天在做一个监控系统，想到了它。2010-10-10
今天小编就为大家分享一篇layui 弹出层值回传解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家介绍了json格式判断函数速记示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了javascript实现全角半角检测的方法,涉及javascript针对字符遍历与检测的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了BootStrap扔进Django里的方法，小编认为本文介绍的不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
最新评论