如何利用todolist提高生产力？

发布于：2024-05-07 ⋅ 阅读:(16) ⋅ 点赞:(0)

在一个繁忙的星期一早晨，小明打开他的笔记本电脑，看着满屏的琐碎任务，感到一阵无力。他曾经试过各种方法来提高自己的效率，但总是无济于事。然而，当他尝试使用Todolist时，一切都开始变得不同了...

据统计，人们每天平均会忘记大约40%的计划中的任务。这个数字听起来惊人吗？但或许更令人惊讶的是，通过简单的Todolist工具，这个数字可以大大降低...

你是否曾经感到自己陷入了无尽的待办事项之中，感觉毫无头绪？你是否曾经因为忘记了重要的任务而感到后悔？如果是的话，或许你需要一种更有效的方法来管理你的任务和时间——那就是Todolist。

正文

我们如何用js写一个todolist呢？

  • 首先我们思考一下html部分的编写
    <body>
    <div id="app" class="container">
        <h2 class="title">Todo List</h2>

        <div class="input-group">
            <div class="label">待办事项</div>
            <input type="text" class="content" id="newTodo">
            <button class="btn">新增</button>
        </div>

        <div class="list">
            <ul id="todo-list">

            </ul>
        </div>
    </div>
    
</body>

我们使用HTML建一个待办事项列表（Todo List）的基本布局。

  1. <div id="app" class="container">：这是一个带有id为"app"和类名为"container"的<div>元素，作为整个应用的容器。

  2. <h2 class="title">Todo List</h2>：这是一个标题，显示在页面上方，标识这是一个待办事项列表。

  3. <div class="input-group">：这是一个输入组，用于输入待办事项。

    • <div class="label">待办事项</div>：一个具有类名为"label"的<div>元素，显示文本"待办事项"，作为输入框前的标签。
    • <input type="text" class="content" id="newTodo">：一个具有类型为"text"、类名为"content"、id为"newTodo"的<input>元素，用于输入待办事项的内容。
    • <button class="btn">新增</button>：一个具有类名为"btn"的<button>元素，显示文本"新增"，用于提交新的待办事项。

  4. <div class="list">：这是一个待办事项列表的容器。

    • <ul id="todo-list">：一个具有id为"todo-list"的<ul>元素，用于显示待办事项列表。列表的内容将在JavaScript代码中动态添加。

这段代码创建了一个基本的待办事项列表页面结构，包括一个标题、一个输入框和一个提交按钮，以及一个空的待办事项列表。JavaScript代码可以根据用户的操作来动态地添加新的待办事项到列表中。

  • 在完成基本布局后，我们要用CSS样式化一个待办事项列表的外观和布局。
   /* html{
  height: 100%;
} */
*{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  
  body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .container{
    width: 400px;
    height: 400px;
  }
  .title{
    text-align: center; 
    margin: 10px;
  }
  .input-group{
    display: flex;
  }
  .label{
    padding: 5px 10px 5px 10px;
  }
  .btn{
    padding: 5px 10px;
    margin-left: 10px;
  }
  .content{
    flex: 1;
  }
  .item:nth-child(1){
    margin-top: 20px;
  }
  .item{
    border-bottom: 1px solid #eee;
  }
  .flex{
    display: flex;
    width: 90%;
    margin: 0 auto;
    align-items: center;
  }
  
  .item-check{
    margin-right: 20px;
  }
  .item-content{
    flex: 1;
  }
  .close{
    width: 30px;
    height: 30px;
    border: 1px solid #aaa;
    font-size: 20px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
  }
  1. *：通用选择器，应用于文档中的所有元素，用于消除默认的外边距和内边距。
  2. li：选择所有列表项，并将其样式设为无序列表样式。
  3. body：选择文档的 <body> 元素，并设置其高度为视口的100%，以及使用 Flex 布局在垂直和水平方向上居中内容。
  4. .container：选择类名为 container 的元素，并设置其宽度和高度为400px。
  5. .title：选择类名为 title 的元素，并将其文本居中对齐，以及设置上下边距为10px。
  6. .input-group：选择类名为 input-group 的元素，并设置其为 Flex 布局。
  7. .label 和 .btn：选择类名为 label 和 btn 的元素，并设置它们的内边距和外边距。
  8. .content：选择类名为 content 的元素，并将其设置为 Flex 布局中的一个弹性项目，以便它可以填充其父容器的可用空间。
  9. .item：选择所有类名为 item 的元素，并为它们设置底部边框以创建分割线效果。
  10. .item:nth-child(1)：选择第一个类名为 item 的元素，并为其设置上边距为20px，用于在第一个待办事项之前添加间距。
  11. .flex：选择类名为 flex 的元素，并将其设置为 Flex 布局，并在水平方向上居中对齐其子元素。
  12. .item-check 和 .item-content：选择类名为 item-check 和 item-content 的元素，并设置它们为 Flex 布局中的弹性项目，以便它们可以根据需要调整大小。
  13. .close：选择类名为 close 的元素，并设置其样式，包括宽度、高度、边框、字体大小、文本对齐方式、边框半径和鼠标指针样式
  • 最后来到js部分，我们用js创建了一个待办事项列表的基本功能。
 function addNewTodo() {
    // 获取input中的内容
    if (document.getElementById('newTodo').value.trim() !== '') {
      todoData.push({
        id: Math.floor(Date.now()),
        title: document.getElementById('newTodo').value,
        completed: false
      })

      // 渲染新的li
      render()
    }
  }

这是一个名为 addNewTodo 的函数，用于向待办事项列表中添加新的待办事项。让我们逐行分析这个函数的功能：

  1. // 获取input中的内容：这是一个注释，说明接下来的代码将获取输入框中的内容。

  2. if (document.getElementById('newTodo').value.trim() !== '')：使用 document.getElementById 方法获取具有 id 为 newTodo 的输入框元素，并获取其值。然后使用 trim() 方法去除值的前后空格，并检查是否不为空。

    • 如果输入框的值不为空，则执行以下操作：

  3. todoData.push({ id: Math.floor(Date.now()), title: document.getElementById('newTodo').value, completed: false })：向 todoData 数组中添加一个新的待办事项对象。

    • id 属性通过 Math.floor(Date.now()) 生成，它获取当前时间的毫秒数并向下取整，保证了每个待办事项对象的 id 都是唯一的。
    • title 属性获取了输入框中的值，即待办事项的内容。
    • completed 属性默认设置为 false，表示这个待办事项尚未完成。

  4. render()：调用 render 函数，用于渲染新的待办事项。这个函数在添加新的待办事项之后会被调用，以更新待办事项列表的显示。

    function render() {
    var str = ''

    todoData.forEach(function(item) {
      str += `
        <li class="item">
          <div class="flex">
            <input type="checkbox" class="item-check">
            <p class="item-content">${item.title}</p>
            <span class="close">x</span>
          </div>
        </li>
      `
    })
    todoList.innerHTML = str
  }

  addTodo.addEventListener('click', addNewTodo)

这段代码定义了一个名为 render 的函数，用于将 todoData 数组中的待办事项数据渲染到待办事项列表中，并且为添加按钮 addTodo 添加了一个点击事件监听器，当用户点击按钮时调用 addNewTodo 函数。

让我们分析 render 函数的功能：

  1. var str = ''：声明一个空字符串 str，用于存储待渲染的 HTML 内容。

  2. todoData.forEach(function(item) {...})：使用 forEach 方法遍历 todoData 数组中的每个待办事项对象。

    • 对于每个待办事项对象，执行以下操作：

  3. str += ...：在字符串 str 的末尾追加一段 HTML 代码，用于表示当前遍历到的待办事项。这段 HTML 代码包含一个 <li> 元素，代表一个待办事项，其中包含一个具有类名为 flex 的 <div> 元素，用于实现布局。

  4. <input type="checkbox" class="item-check">：复选框，用于标记待办事项是否已完成。

  5. <p class="item-content">${item.title}</p>：段落元素，显示待办事项的标题。${item.title} 是 JavaScript 模板字符串语法，用于在字符串中插入变量值，这里表示插入当前待办事项对象的 title 属性值。

  6. <span class="close">x</span>：关闭按钮，用于删除待办事项。

  7. todoList.innerHTML = str：将拼接好的 HTML 字符串 str 设置为待办事项列表容器 todoList 的 HTML 内容，从而实现待办事项列表的更新显示。

最后，addTodo.addEventListener('click', addNewTodo) 给添加按钮添加了一个点击事件监听器，当用户点击按钮时调用 addNewTodo 函数，以实现添加新的待办事项的功能。

在分析完代码的所有部分后，我们来看看Todolist的效果

总结

通过使用Todolist，我们可以更好地组织我们的任务，提高生产效率。无论是在工作中还是生活中，一个良好的任务管理工具都能够为我们带来巨大的帮助。希望本文提供的指南和技巧能够帮助你更好地利用Todolist，从而更好地管理你的时间和任务。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布