• 构建一个待办事项列表（To-Do List）应用程序

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

    HTML结构

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

    1. html>  
    2. <html>  
    3. <head>  
    4.     <title>To-Do List Apptitle>  
    5.     <style>  
    6.         .completed {  
    7.             text-decoration: line-through;  
    8.         }  
    9.     style>  
    10. head>  
    11. <body>  
    12.     <h1>To-Do Listh1>  
    13.     <input type="text" id="newTask" placeholder="Add a new task">  
    14.     <button id="addTask">Add Taskbutton>  
    15.     <ul id="taskList">  
    16.           
    17.     ul>  
    18.     <script src="app.js">script>  
    19. body>  
    20. html>

     

    JavaScript实现

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

    1. // 获取HTML元素引用  
    2. const newTaskInput = document.getElementById('newTask');  
    3. const addTaskButton = document.getElementById('addTask');  
    4. const taskList = document.getElementById('taskList');  
    5.   
    6. // 添加新任务的功能  
    7. addTaskButton.addEventListener('click', function() {  
    8.     // 获取输入框中的文本  
    9.     const taskText = newTaskInput.value.trim();  
    10.   
    11.     // 检查是否有文本输入  
    12.     if (taskText) {  
    13.         // 创建新的列表项  
    14.         const listItem = document.createElement('li');  
    15.         listItem.textContent = taskText;  
    16.   
    17.         // 添加完成任务的功能  
    18.         listItem.addEventListener('click', function() {  
    19.             listItem.classList.toggle('completed');  
    20.         });  
    21.   
    22.         // 添加删除任务的功能  
    23.         const deleteButton = document.createElement('button');  
    24.         deleteButton.textContent = 'Delete';  
    25.         deleteButton.addEventListener('click', function() {  
    26.             taskList.removeChild(listItem);  
    27.         });  
    28.   
    29.         listItem.appendChild(deleteButton);  
    30.         taskList.appendChild(listItem);  
    31.   
    32.         // 清空输入框  
    33.         newTaskInput.value = '';  
    34.     }  
    35. });

     代码解释

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

     

    总结

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

  • 相关阅读:
    spring面试常遇见的问题（02）
    MIGO行项目屏幕增强
    【Redis入门笔记 07】数据库持久化
    【综合笔试题】难度 3.5/5，多解法热门二叉树笔试题
    Mac 公证失败问题排查
    Nginx 学习
    洛谷P2763 试题库问题
    6套台式组装机电脑配置清单大全（2022年618）
    odoo 开发入门教程系列-计算的字段和变更(Computed Fields And Onchanges)
    172.mybatisPlus的实际应用
  • 原文地址：https://blog.csdn.net/geng1025/article/details/136202252