利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）

下面是利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）的完整攻略。

准备工作

首先，我们需要创建一个HTML文件，并链接上CSS和JS文件。其中，CSS文件用于样式的设置，JS文件用于实现页面的动态效果和交互逻辑。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TODOLIST</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>TODOLIST</h1>

  <form>
    <input type="text" id="new-todo" placeholder="What needs to be done?" autofocus>
  </form>

  <ul id="todo-list"></ul>

  <script src="todo.js"></script>
</body>
</html>

实现功能

接下来，我们需要使用JS代码实现TODOLIST的各种功能，包括添加、删除、修改和完成任务等。

添加任务

首先，我们需要为输入框添加keydown事件，并在用户按下回车键时，创建一个新的li元素，并将用户输入的内容插入到其中。同时，我们还需要将新的任务存储到本地存储中，以便在页面刷新后可以继续使用。

const todoInput = document.getElementById('new-todo');
const todoList = document.getElementById('todo-list');

let todos = JSON.parse(localStorage.getItem('todos')) || [];

function addTodo() {
  if (!todoInput.value.trim()) return;

  const todo = {
    id: Date.now().toString(),
    title: todoInput.value.trim(),
    completed: false
  };

  todos.push(todo);

  localStorage.setItem('todos', JSON.stringify(todos));

  const li = document.createElement('li');
  const checkbox = document.createElement('input');
  const label = document.createElement('label');
  const button = document.createElement('button');

  li.setAttribute('data-id', todo.id);
  checkbox.setAttribute('type', 'checkbox');
  checkbox.setAttribute('id', 'todo-' + todo.id);
  label.setAttribute('for', 'todo-' + todo.id);
  label.textContent = todo.title;
  button.textContent = 'x';

  li.appendChild(checkbox);
  li.appendChild(label);
  li.appendChild(button);
  todoList.appendChild(li);

  todoInput.value = '';
}

todoInput.addEventListener('keydown', event => {
  if (event.key === 'Enter') {
    event.preventDefault();
    addTodo();
  }
});

删除任务

接下来，我们需要为删除按钮添加click事件，并在用户点击按钮时，删除对应的任务。同时，我们还需要在本地存储中删除对应的任务。

todoList.addEventListener('click', event => {
  if (event.target.tagName === 'BUTTON') {
    const li = event.target.parentNode;
    const id = li.getAttribute('data-id');

    todos = todos.filter(todo => todo.id !== id);

    localStorage.setItem('todos', JSON.stringify(todos));

    li.remove();
  }
});

修改任务

接下来，我们需要为任务标题添加dblclick事件，并在用户双击标题时，将其变为可编辑状态。同时，我们需要为input元素添加blur事件，并在用户离开input元素时，将其变为不可编辑状态，并将修改后的内容保存到本地存储中。

todoList.addEventListener('dblclick', event => {
  if (event.target.tagName === 'LABEL') {
    const label = event.target;
    const input = document.createElement('input');

    input.setAttribute('type', 'text');
    input.setAttribute('value', label.textContent);

    label.replaceWith(input);

    input.focus();

    input.addEventListener('blur', () => {
      const li = input.parentNode;
      const id = li.getAttribute('data-id');

      todos = todos.map(todo => {
        if (todo.id === id) {
          todo.title = input.value.trim();
        }
        return todo;
      });

      localStorage.setItem('todos', JSON.stringify(todos));

      const label = document.createElement('label');

      label.setAttribute('for', 'todo-' + id);
      label.textContent = input.value.trim();

      input.replaceWith(label);
    });
  }
});

完成任务

最后，我们需要为复选框添加change事件，并在用户勾选复选框时，将对应的任务标记为已完成。同时，我们需要在本地存储中保存任务的完成状态。

todoList.addEventListener('change', event => {
  if (event.target.tagName === 'INPUT') {
    const li = event.target.parentNode;
    const id = li.getAttribute('data-id');

    todos = todos.map(todo => {
      if (todo.id === id) {
        todo.completed = event.target.checked;
      }
      return todo;
    });

    localStorage.setItem('todos', JSON.stringify(todos));

    li.classList.toggle('completed', event.target.checked);
  }
});

示例说明

以下是两个使用示例：

示例1

例如，我们现在需要添加一个名为“吃早餐”的任务，我们可以在输入框中输入“吃早餐”，然后按下回车键，就可以在页面上看到一个新的任务出现。同时，我们可以在本地存储中查看该任务是否已经被保存。

示例2

例如，现在有一个名为“做饭”的任务，我们已经完成了这个任务。在页面上，我们可以勾选该任务对应的复选框，此时该任务会被标记为已完成。同时，我们也可以在本地存储中查看该任务的完成状态是否已经被更新。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本） - Python技术站