JS实现简单的todoList(记事本)效果

下面我会给你讲解JS实现简单的todoList(记事本)效果的完整攻略。

1. 界面部分

首先，我们需要搭建好页面框架。可以使用HTML和CSS实现一个简单的布局，其中包括待办事项输入框、已完成事项展示区域、未完成事项展示区域等。

<body>
  <div id="app">
    <h1>Todo List</h1>
    <input id="new-todo" type="text" placeholder="请输入待办事项...">
    <div>
      <h2>未完成事项</h2>
      <ul id="incomplete-tasks">
      </ul>
    </div>
    <div>
      <h2>已完成事项</h2>
      <ul id="completed-tasks">
      </ul>
    </div>
  </div>
</body>

2. JS部分

接下来，我们需要使用JavaScript来实现功能。

添加新事项

const addButton = document.getElementById('add-button');
const taskInput = document.getElementById('new-todo');
const incompleteTasksList = document.getElementById('incomplete-tasks');

addButton.addEventListener('click', () => {
  if (taskInput.value) {
    incompleteTasksList.appendChild(createNewTaskElement(taskInput.value));
    taskInput.value = '';
  }
});

function createNewTaskElement(taskName) {
  const listItem = document.createElement('li');
  const checkBox = document.createElement('input');
  const label = document.createElement('label');
  const deleteButton = document.createElement('button');

  checkBox.type = 'checkbox';
  label.innerText = taskName;
  deleteButton.innerText = '删除';

  listItem.appendChild(checkBox);
  listItem.appendChild(label);
  listItem.appendChild(deleteButton);

  return listItem;
}

标记任务为已完成

const incompleteTasksList = document.getElementById('incomplete-tasks');
const completedTasksList = document.getElementById('completed-tasks');

incompleteTasksList.addEventListener('change', (event) => {
  const taskItem = event.target.parentElement;
  const checkBox = event.target;

  if (checkBox.checked) {
    completedTasksList.appendChild(taskItem);
  } else {
    incompleteTasksList.appendChild(taskItem);
  }
});

删除任务

const incompleteTasksList = document.getElementById('incomplete-tasks');
const completedTasksList = document.getElementById('completed-tasks');

incompleteTasksList.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    const taskItem = event.target.parentElement;
    taskItem.remove();
  }
});

completedTasksList.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    const taskItem = event.target.parentElement;
    taskItem.remove();
  }
});

3. 示例说明

示例一：添加新事项

用户在待办事项输入框中输入一条待办事项，点击添加按钮。输入框清空，并将待办事项添加到未完成事项展示区域中。

示例二：标记任务为已完成

用户点击某一未完成事项前面的复选框，该任务从未完成事项列表中移动到已完成事项列表中。

以上就是JS实现简单的todoList(记事本)效果的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现简单的todoList(记事本)效果 - Python技术站