likes
comments
collection
share

用JavaScript简单创建交互式待办事项列表：完整实现和功能解析

作者站长头像
站长
· 阅读数 21

一.前言

在本文中，简单实现一个ToDoList，我们将使用HTML、CSS和JavaScript创建一个简单而实用的待办事项列表应用。这个应用允许用户添加新的任务，并且可以标记任务为已完成。

二.html结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="app" class="todo">
        <div class="title">ToDoList</div>
        <div class="input-group">
            <div class="label">待办事项</div>
            <input type="text" class="content" id="newTodo">
            <button class="btn">+</button>
        </div>
        <ul class="list">

        </ul>
    </div>
    <script src="./index.js"></script>
</body>

</html>

  1. Head部分

    • <link rel="stylesheet" href="style.css"> 引入外部样式表 style.css。

  2. Body部分

    • <div id="app" class="todo"> 主容器，具有 todo 类。

    • <div class="title">ToDoList</div> 标题部分，显示 "ToDoList" 文本。

    • <div class="input-group"> 输入框和按钮的容器。

      • <div class="label">待办事项</div> 输入框前的标签 "待办事项"。
      • <input type="text" class="content" id="newTodo"> 输入框，用于输入新的待办事项。
      • <button class="btn">+</button> 添加按钮，用于提交新的待办事项。

    • <ul class="list"></ul> 待办事项列表容器，初始时为空。

  3. JavaScript引入

    • 引入位于 index.js 文件中的JavaScript代码，用于处理待办事项列表的交互和逻辑。

三.css样式

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vp;
    display: flex;
    justify-content: center;
}
.todo{
    width: 500px;
    height: 500px;
    /* border: 1px solid black; */
    margin-top: 30px;
}
.title{
    font-size: 60px;
    text-align: center;
    color: rgb(220, 18, 18);
}
.input-group{
    display: flex;
    font-size: 30px;
}
.content{
    flex:1;
    font-size: 20px;
}
.label{
    padding: 10px;
}
.btn{
    width: 80px;
    font-size: 30px;
    margin-left: 10px;
}
.list-item{
    display: flex;
    padding: 20px;
    border-bottom: 1px solid  rgb(224, 7, 7);
    font-size: 26px;
    align-items: center;
}
.item-check{
    width: 20px;
    height: 20px;
    
    
}
.item-content{
    margin: 0 10px;
    flex:1
}
.close{
    display: none;
}
.list-item:hover .close{
    display: block;
}

四.JavaScript交互

1.HTML和初始JavaScript

var todoData = [];
var addTodo = document.querySelector('.btn');
var todoList = document.querySelector('.list');
  • todoData: 存储待办事项的数组。
  • addTodo: 获取添加按钮的引用。
  • todoList: 获取待办事项列表 ul 元素的引用。

2.添加新待办事项函数 addNewTodo()

function addNewTodo() {
  if (document.getElementById('newTodo').value !== '') {
    // 创建一个新的待办事项对象，并添加到 todoData 数组中
    todoData.push({
      id: Date.now(),  // 使用当前时间戳作为唯一标识
      content: document.getElementById('newTodo').value,
      completed: false  // 标记待办事项为未完成
    });

    // 渲染更新待办事项列表
    render();

    // 清空输入框
    document.getElementById('newTodo').value = '';
  }
}
  • 当点击添加按钮时，判断输入框是否有值，如果有则创建一个新的待办事项对象，包含 id（使用时间戳保证唯一性）、content（待办事项内容）和 completed（是否完成）。
  • 将新待办事项添加到 todoData 数组中，并调用 render() 函数更新列表显示。
  • 清空输入框内容，准备下一个待办事项输入。

3.渲染函数 render()

function render() {
  var str = '';

  for (var i = 0; i < todoData.length; i++) {
    var item = todoData[i];
    str += `
      <li class="list-item">
        <input type="checkbox" class="item-check" data-action="delete" data-id="${item.id}">
        <p class="item-content" data-id="${item.id}">${item.content}</p>
        <span class="close" data-id="${item.id}" data-action="remove">×</span>
      </li>
    `;
  }

  todoList.innerHTML = str;  // 更新列表内容
}
  • render() 函数根据 todoData 数组的内容动态生成待办事项列表的 HTML 结构，并更新到 todoList 元素的 innerHTML 中显示出来。
  • 每个待办事项项包括复选框（用于标记完成）、事项内容和删除按钮。

4.删除待办事项函数 removeTodo()

function removeTodo(e) {
  if (e.target.dataset.action == "remove") {
    var list_id = e.target.dataset.id;
    var index = todoData.findIndex(function (item) {
      return item.id == list_id;
    });

    // 从数组中移除选定的待办事项
    todoData.splice(index, 1);

    // 重新渲染列表
    render();
  }
}
  • 当点击删除按钮时，根据按钮的 data-id 属性找到对应的待办事项在 todoData 数组中的索引，并使用 splice() 方法移除。
  • 调用 render() 函数重新渲染列表，更新页面显示。

5.复选框操作函数 deleteTodo()

function deleteTodo(e) {
  if (e.target.dataset.action == "delete") {
    var listId = e.target.dataset.id;
    var contentElement = document.querySelector(`.item-content[data-id="${listId}"]`);
    var checkbox = document.querySelector(`.item-check[data-id="${listId}"]`);

    if (checkbox.checked) {
      contentElement.style.textDecoration = 'line-through';  // 添加删除线样式
    } else {
      contentElement.style.textDecoration = 'none';  // 移除删除线样式
    }
  }
}
  • 当复选框状态改变时，根据 data-id 找到对应的事项内容元素，并根据复选框的状态添加或移除删除线样式。

6.事件监听和事件委托

addTodo.addEventListener('click', addNewTodo);
todoList.addEventListener('click', deleteTodo);
todoList.addEventListener('click', removeTodo);
  • 使用 addEventListener 给添加按钮和待办事项列表添加点击事件监听器，分别触发添加新待办事项、处理复选框状态和删除待办事项的功能。

7.完整JavaScript

//用户每次创建一个todo，就存进数组
//循环数组，生成数组长度相同的li结构

var todoData = []
var addTodo = document.querySelector('.btn')  //需要类在前面加.
var todoList = document.querySelector('.list')

//新增按钮
function addNewTodo() {
  //先判断input是否有值
  if (document.getElementById('newTodo').value !== '') {
    todoData.push({
      id: Date.now(),
      content: document.getElementById('newTodo').value,
      completed: false
    })


  }
  //渲染列表
  render()
  document.getElementById('newTodo').value = ''

}

function render() {
  var str = ''

  for (var i = 0; i < todoData.length; i++) {
    var item = todoData[i]
    str += ` 
            <li class="list-item">
            <input type="checkbox" class="item-check" data-action = "delete" data-id = "${item.id}">
            <p class="item-content" data-id="${item.id}">${item.content}</p>
            <span class="close" data-id="${item.id}" data-action="remove">×</span>
        </li>
            `
  }

  //往ul中植入str
  todoList.innerHTML = str

}

function removeTodo(e) {
  if (e.target.dataset.action == "remove") { //dataset：这是一个 HTMLElement 属性，提供对所有自定义数据属性 (data-* 属性) 的访问。它返回一个 DOMStringMap 对象。
    //拿到当前这个span上的id值，找到数组中哪个对象中的id和这个span的id相等，
    var list_id = e.target.dataset.id
    //找出它的下标
    var index = todoData.findIndex(function (item) {
      return item.id == list_id
    })
    //按照下标移出数组中的元素
    todoData.splice(index, 1)


    render()
  }
}

function deleteTodo(e) {
  if (e.target.dataset.action == "delete") {
    // 拿到当前这个checkbox的id，找到数组中相对的元素
    var listId = e.target.dataset.id;

    // 找到与复选框相对应的段落元素
    var contentElement = document.querySelector(`.item-content[data-id="${listId}"]`);

    // 找到复选框元素
    var checkbox = document.querySelector(`.item-check[data-id="${listId}"]`);
    console.log(checkbox.checked, contentElement);

    // 应用删除线样式
    // if (contentElement) {
    //   contentElement.style.textDecoration = 'line-through';
    // }

    // 设置复选框为选中状态
    if (checkbox.checked) {
      // checkbox.checked = true;
      contentElement.style.textDecoration = 'line-through';
    } else {
      contentElement.style.textDecoration = 'none';
    }

    // 更新列表
    // render();
  }
}

addTodo.addEventListener('click', addNewTodo)
todoList.addEventListener('click', deleteTodo)
todoList.addEventListener('click', removeTodo)  //事件委托

五.效果演示

用JavaScript简单创建交互式待办事项列表：完整实现和功能解析

用JavaScript简单创建交互式待办事项列表：完整实现和功能解析

六.小结

这详细介绍了如何使用纯JavaScript实现一个功能完善的待办事项列表应用。从初始化变量到添加、删除和标记完成待办事项，每个功能都经过了清晰的解释和示范。通过事件监听和DOM操作，实现了用户友好的交互体验，使得用户能够方便地管理和更新待办事项。

转载自:https://juejin.cn/post/7393298241792819251
评论
请登录