使用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">  
</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创建一个待办事项列表!

相关文章
|
12天前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
18 0
|
12天前
|
存储 JavaScript 前端开发
Angular.js 如何绘制列表
Angular.js 如何绘制列表
17 2
|
12天前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
|
12天前
|
前端开发 JavaScript API
JavaScript待办事项列表
JavaScript待办事项列表
|
12天前
|
存储 前端开发 JavaScript
深入浅出:使用JavaScript实现一个功能丰富的待办事项应用
深入浅出:使用JavaScript实现一个功能丰富的待办事项应用
|
12天前
|
移动开发 前端开发 JavaScript
使用JavaScript实现一个复杂功能:自定义拖拽排序列表
使用JavaScript实现一个复杂功能:自定义拖拽排序列表
|
12天前
|
JavaScript
sort列表排序(js的问题)
sort列表排序(js的问题)
|
12天前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
32 0
|
12天前
编程笔记 html5&css&js 015 HTML列表
编程笔记 html5&css&js 015 HTML列表
|
2天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
9 1