纯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创建待办事项列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

兼容浏览器的js事件绑定函数(详解)
下面小编就为大家带来一篇兼容浏览器的js事件绑定函数(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
JavaScript控制两个列表框listbox左右交换数据的方法
这篇文章主要介绍了JavaScript控制两个列表框listbox左右交换数据的方法,实例分析了javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
浅谈JavaScript原型链
这篇文章主要为大家详细介绍了JavaScript原型链，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2023-04-04
iframe的onreadystatechange事件在firefox下的使用
firefox不支持iframe的onreadystatechange事件，不过有个方法可以实现同等的效果,需要的朋友可以参考下
2014-04-04
Javascript 闭包详解及实例代码
这篇文章主要介绍了Javascript 闭包详解及实例代码的相关资料,闭包是一个特别抽象的概念，特别是ECMA规范给的定义，如果没有实战经验，很难从定义去理解它，需要的朋友可以参考下
2016-11-11
JavaScript设计模式之原型模式详情
这篇文章主要介绍了JavaScript设计模式之原型模式详情,原型的这种设计模式，是一种比较简单的设计模式，由于初始化都做一些重复性的东西，造成的性能消
2022-06-06
JavaScript实现反转字符串的方法详解
这篇文章主要介绍了JavaScript实现反转字符串的方法,结合实例形式分析了字符串反转操作,并详细讲述了相关函数的功能与使用注意事项,需要的朋友可以参考下
2017-04-04
原生JS实现循环Nodelist Dom列表的4种方式示例
这篇文章主要介绍了原生JS实现循环Nodelist Dom列表的4种方式,结合具体实例形式分析了javascript循环遍历Nodelist Dom列表的常用操作技巧,需要的朋友可以参考下
2018-02-02
使用百度地图实现地图网格的示例
下面小编就为大家分享一篇使用百度地图实现地图网格的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
屏蔽Flash右键信息的js代码
网上好多屏蔽flash右键的方法，可多数是过期的或不合适的，现记录下用JS方法屏蔽flash右键相关版权信息。
2010-01-01