构建一个待办事项列表(To-Do List)应用程序

此程序将允许用户添加新任务,标记任务为完成,以及删除任务。

HTML结构

首先,我们需要一个HTML页面来展示我们的待办事项列表。在<body>标签内,我们可以放置一个输入框用于添加新任务,一个按钮用于提交新任务,以及一个用于显示任务的列表。

html 复制代码
<!DOCTYPE html>  
<html>  
<head>  
    <title>To-Do List App</title>  
    <style>  
        .completed {  
            text-decoration: line-through;  
        }  
    </style>  
</head>  
<body>  
    <h1>To-Do List</h1>  
    <input type="text" id="newTask" placeholder="Add a new task">  
    <button id="addTask">Add Task</button>  
    <ul id="taskList">  
        <!-- Task items will go here -->  
    </ul>  
    <script src="app.js"></script>  
</body>  
</html>

JavaScript实现

然后,我们在一个名为app.js的外部JavaScript文件中编写我们的程序逻辑。

javascript 复制代码
// 获取HTML元素引用  
const newTaskInput = document.getElementById('newTask');  
const addTaskButton = document.getElementById('addTask');  
const taskList = document.getElementById('taskList');  
  
// 添加新任务的功能  
addTaskButton.addEventListener('click', function() {  
    // 获取输入框中的文本  
    const taskText = newTaskInput.value.trim();  
  
    // 检查是否有文本输入  
    if (taskText) {  
        // 创建新的列表项  
        const listItem = document.createElement('li');  
        listItem.textContent = taskText;  
  
        // 添加完成任务的功能  
        listItem.addEventListener('click', function() {  
            listItem.classList.toggle('completed');  
        });  
  
        // 添加删除任务的功能  
        const deleteButton = document.createElement('button');  
        deleteButton.textContent = 'Delete';  
        deleteButton.addEventListener('click', function() {  
            taskList.removeChild(listItem);  
        });  
  
        listItem.appendChild(deleteButton);  
        taskList.appendChild(listItem);  
  
        // 清空输入框  
        newTaskInput.value = '';  
    }  
});

代码解释

  1. 获取HTML元素引用
    我们使用document.getElementById()方法来获取HTML页面中元素的引用,这样我们就可以在JavaScript中操作这些元素了。
  2. 添加新任务
    我们给"Add Task"按钮添加了一个点击事件监听器。当按钮被点击时,它会执行一个匿名函数。这个函数首先获取输入框中的文本,然后检查是否有文本输入。如果有,它就创建一个新的<li>元素,并将其添加到任务列表中。同时,它还创建了一个"Delete"按钮,用于删除任务。
  3. 完成任务和删除任务
    我们还给每个任务列表项添加了一个点击事件监听器。当列表项被点击时,它会切换completed类,从而改变文本的样式(通过CSS中的text-decoration: line-through;)。"Delete"按钮也有一个点击事件监听器,当它被点击时,它会从其父元素(即任务列表)中移除相应的任务列表项。

总结

这个待办事项列表应用程序展示了如何使用JavaScript来操作DOM、处理用户输入和事件,以及实现基本的应用程序逻辑。虽然这个例子相对简单,但它涵盖了很多在构建更复杂的Web应用程序时会用到的基本概念和技术。通过学习和实践这些技术,你可以逐渐掌握如何使用JavaScript来创建功能丰富、交互性强的Web应用程序。

相关推荐
JSU_曾是此间年少16 分钟前
数据结构——线性表与链表
数据结构·c++·算法
sjsjs1123 分钟前
【数据结构-合法括号字符串】【hard】【拼多多面试题】力扣32. 最长有效括号
数据结构·leetcode
写bug的小屁孩1 小时前
前后端交互接口(三)
运维·服务器·数据库·windows·用户界面·qt6.3
blammmp1 小时前
Java:数据结构-枚举
java·开发语言·数据结构
昂子的博客2 小时前
基础数据结构——队列(链表实现)
数据结构
lulu_gh_yu2 小时前
数据结构之排序补充
c语言·开发语言·数据结构·c++·学习·算法·排序算法
hairenjing11233 小时前
在 Android 手机上从SD 卡恢复数据的 6 个有效应用程序
android·人工智能·windows·macos·智能手机
~yY…s<#>4 小时前
【刷题17】最小栈、栈的压入弹出、逆波兰表达式
c语言·数据结构·c++·算法·leetcode
XuanRanDev5 小时前
【每日一题】LeetCode - 三数之和
数据结构·算法·leetcode·1024程序员节
代码猪猪傻瓜coding5 小时前
力扣1 两数之和
数据结构·算法·leetcode