原生JavaScript实现todolist功能

2023年6月11日上午9:12 • JavaScript

当我们提到todolist功能时，我们通常指的是一个可以添加、删除、编辑、标记已完成等功能的任务列表。

实现这样一个功能，可以使用原生JavaScript来完成。下面是一些步骤和示例代码：

步骤一：创建HTML结构

首先，需要创建一个HTML结构来展示任务列表。需要一个输入框来允许用户输入新任务，还需要一个可滚动的任务列表来展示已有的任务。每个任务项需要包含一个复选框来标记任务是否已完成，还需要包含一个编辑按钮来允许用户编辑任务。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Todo List</title>
</head>
<body>
  <h1>Todo List</h1>
  <input type="text" placeholder="Add New Task">
  <ul>
    <li>
      <input type="checkbox">
      <span>Buy Milk</span>
      <button>Edit</button>
      <button>Delete</button>
    </li>
    <li>
      <input type="checkbox">
      <span>Wash Car</span>
      <button>Edit</button>
      <button>Delete</button>
    </li>
    <li>
      <input type="checkbox">
      <span>Walk Dog</span>
      <button>Edit</button>
      <button>Delete</button>
    </li>
  </ul>
</body>
</html>

步骤二：添加CSS样式

接下来，需要使用CSS为任务列表添加样式，使其外观更美观。

示例代码：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

input[type="checkbox"] {
  margin-right: 10px;
}

button {
  background-color: transparent;
  border: none;
  color: #666;
  cursor: pointer;
}

button:hover {
  color: #000;
}

.completed {
  text-decoration: line-through;
  opacity: 0.5;
}

.editMode span {
  display: none;
}

.editMode input[type="text"] {
  display: inline-block;
  padding: 5px;
  margin-right: 10px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

步骤三：使用JavaScript管理任务列表

接下来，需要使用JavaScript来添加、删除、编辑和标记任务为已完成。

示例代码：

// 获取DOM元素
var input = document.querySelector("input[type='text']");
var ul = document.querySelector("ul");

// 添加任务
function addTask() {
  if (input.value != "") {
    var li = document.createElement("li");
    li.innerHTML = `
      <input type="checkbox">
      <span>${input.value}</span>
      <button>Edit</button>
      <button>Delete</button>
    `;
    ul.appendChild(li);
    input.value = "";
    addEventListenerToButtons();
  }
}

// 删除任务
function deleteTask(el) {
  el.parentElement.remove();
}

// 编辑任务文本
function editTask(el) {
  var span = el.parentElement.querySelector("span");
  var input = el.parentElement.querySelector("input[type='text']");
  if (el.textContent == "Edit") {
    el.textContent = "Save";
    el.parentElement.classList.add("editMode");
    input.value = span.textContent;
    input.focus();
    input.selectionStart = 0;
    input.selectionEnd = input.value.length;
  } else {
    el.textContent = "Edit";
    el.parentElement.classList.remove("editMode");
    span.textContent = input.value;
  }
}

// 标记已完成
function toggleCompleted(el) {
  var span = el.parentElement.querySelector("span");
  if (el.checked) {
    span.classList.add("completed");
  } else {
    span.classList.remove("completed");
  }
}

// 给所有按钮添加事件监听器
function addEventListenerToButtons() {
  var buttons = document.querySelectorAll("li button");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(e) {
      if (e.target.textContent == "Delete") {
        deleteTask(e.target);
      } else {
        editTask(e.target);
      }
    });
  }
  var checkboxes = document.querySelectorAll("li input[type='checkbox']");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener("click", function(e) { toggleCompleted(e.target); });
  }
}

// 给添加按钮添加事件监听器
var addButton = document.querySelector("input[type='button']");
addButton.addEventListener("click", addTask);
addEventListenerToButtons();

以上代码实现了添加、删除、编辑和标记任务为已完成的功能。在此基础上，您可以继续添加其他功能来完善您的todolist应用程序。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JavaScript实现todolist功能 - Python技术站