原生JavaScript实现todolist功能

当我们提到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技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • egg.js的基本使用实例

    下面我为大家讲解一下 Egg.js 的基本使用实例: 简介 Egg.js 是一个基于 Node.js 和 Koa.js 的企业级应用开发框架,它提供了一套易于上手的约定和最佳实践,并基于这些约定和最佳实践提供了适用于企业级应用的各种插件和扩展,同时还支持基于插件的扩展机制,让用户可以根据自己的需要对框架进行个性化定制。 安装 安装 Egg.js 的前提条件是…

    JavaScript 2023年6月11日
    00
  • JS课堂笔记(4.17-4.21)

    一、循环  1.在程序中,一组被重复执行的语句被称为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称为循环语句。 2.循环执行的过程是①第一次循环:第一次赋值,然后条件判断,执行循环体,最后执行累计。 ②非第一次循环:条件判断,执行循环体,最后执行累计。 3.continue,跳过本次进入下一次循环,从continue…

    JavaScript 2023年4月24日
    00
  • javascript计算对象长度的方法

    当我们需要计算JavaScript对象的长度时,可能会遇到一些困惑。在JavaScript中,通常使用对象字面量(例如{})或构造函数创建对象。计算对象字面量和构造函数对象长度的方法略有不同。 计算对象字面量数量的方法 计算对象字面量数量的一种常见方法是使用Object.keys()方法。它会返回对象中属性名称的数组。通过计算该数组的长度,我们可以得知对象字…

    JavaScript 2023年5月27日
    00
  • JS深入浅出Function与构造函数

    JS深入浅出Function与构造函数 什么是Function? 在JavaScript中,函数被看作是对象,函数也可以看作是特殊的对象。每个函数都是Function类型的实例,都有自己的属性和方法。Function类型的构造函数是用来创建函数对象的。 函数的作用是封装一段代码,并可以用来重复使用,降低代码复杂性,方便维护。一个函数可以有0个或多个参数,可以…

    JavaScript 2023年5月27日
    00
  • flash调用js中的方法,让js传递变量给flash的办法及思路

    实现Flash调用JS方法并接收JS传递的变量有以下两种常见做法: 一、使用 ExternalInterface 作为一个Flash插件的开发者,可以使用 ExternalInterface 达到让 Flash 调用 JavaScript,让 JavaScript 调用 Flash 之间互相交互的目的。 以下是一个示例说明: Flash定义和带入数据 Fla…

    JavaScript 2023年6月11日
    00
  • 通过fastclick源码分析彻底解决tap“点透”

    通过fastclick源码分析彻底解决tap“点透” 背景 在移动端开发过程中,常常会遇到“点透”的问题。例如,当一个元素的click事件和另一个元素的touchend事件同时被触发时,就会发生“点透”,相当于用户点了下下一层的元素。为了避免这种问题的出现,我们可以使用第三方库 fastclick 来解决这一问题,此处将通过 fastclick 的源码分析来…

    JavaScript 2023年6月11日
    00
  • JavaScript获取表单enctype属性的方法

    获取表单的enctype属性,可以使用JavaScript实现。在此提供以下两种方法: 方法一:通过getElementsByName方法获取表单元素,再获取enctype属性值 //获取表单元素 var formElement = document.getElementsByName(‘formName’)[0]; //获取enctype属性值 var e…

    JavaScript 2023年6月10日
    00
  • jquery判断复选框选中状态以及区分attr和prop

    当我们在开发网站时,经常需要使用jQuery来操作复选框的选中状态。但是,由于jQuery的版本和浏览器的不同,有时候我们会遇到一些坑。本次攻略就来详细讲解如何使用jQuery判断复选框的选中状态,并探讨attr和prop两种方法之间的区别与使用场景。 一、使用prop方法判断复选框选中状态 jQuery的prop方法可以获取和设置HTML元素的属性值。对于…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部