原生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日

相关文章

  • jquery实现初次打开有动画效果的网页TAB切换代码

    下面是详细的攻略: 需求分析 需要用jquery实现一个带有切换动画效果的网页TAB切换功能。具体要求如下: 初次加载页面时,选中第一个TAB页面,其他TAB页面隐藏。 点击某个TAB按钮时,该按钮对应的TAB页面显示,并向左边滑动展示。 再次点击该TAB按钮时,该页面向右边滑动隐藏。 代码实现 实现思路: 通过jquery选择器找到所有的TAB按钮和页面元…

    JavaScript 2023年6月10日
    00
  • 仅30行代码实现Javascript中的MVC

    下面是详细讲解“仅30行代码实现Javascript中的MVC”的完整攻略。 什么是MVC? MVC(Model-View-Controller)是一种架构模式,它将应用程序分成三个核心组件:模型、视图和控制器。这种分层方式将业务逻辑、用户界面和用户输入分离开来,实现了代码的独立性和可维护性。 模型(Model):表示应用程序的数据和业务规则。它们为应用程序…

    JavaScript 2023年6月10日
    00
  • 浅谈js函数中的实例对象、类对象、局部变量(局部函数)

    下面是我为你准备的关于“浅谈js函数中的实例对象、类对象、局部变量(局部函数)”的完整攻略。 什么是实例对象? 在 JavaScript 中,实例对象指使用 new 关键字创建的对象。当我们用构造函数创建一个新对象时,对象被实例化为该构造函数的一个实例。该实例对象从构造函数继承了属性和方法,可以独立地操作其属性和方法,而不会影响其他实例对象。 下面是一个示例…

    JavaScript 2023年5月27日
    00
  • layui 表单标签的校验方法

    请看下面的攻略,包含了layui 表单标签的校验方法的详细讲解和示例说明。 layui 表单标签的校验方法 什么是layui表单标签的校验方法 layui是一套基于jQuery的前端UI框架,它提供了一种方法来简化表单的验证功能。 其中,layui.form提供了大量表单组件,并且封装了常用的表单验证规则和方法。我们只需要调用layui的基础方法,就可以完成…

    JavaScript 2023年6月10日
    00
  • JavaScript实现复选框全选功能

    JavaScript实现复选框全选功能的方法有很多,其中一种常用的方法是使用jQuery库的实现方式。下面我来详细讲解一下该方法的步骤。 步骤 1. 引入jQuery库文件 在HTML代码的头部引入jQuery库文件,例如: <script src="https://code.jquery.com/jquery-3.6.0.min.js&qu…

    JavaScript 2023年6月11日
    00
  • 正则表达式RegExp语法与用法详解

    正则表达式RegExp语法与用法详解 什么是正则表达式? 正则表达式是一种通用的字符匹配模式,可以用来进行字符串的查找替换、格式验证等操作。在许多编程语言中都具有很重要的地位。 正则表达式定义 一个正则表达式是由普通字符(例如字符 a 到 z )以及特殊字符(称为元字符)组成的文字模式。模式描述了要匹配的字符类型或顺序。 在JavaScript中,使用Reg…

    JavaScript 2023年6月10日
    00
  • Layui弹框中数据表格中可双击选择一条数据的实现

    Layui弹框中数据表格中可双击选择一条数据的实现过程中需要涉及以下几个关键点: 弹框的实现 数据表格的实现 双击事件的绑定 数据选中的处理 下面我将逐一进行讲解。 1. 弹框的实现 弹框一般需要使用Layui里面的layer模块。我们可以在网页的头部引入layer模块: <link rel="stylesheet" href=&q…

    JavaScript 2023年6月11日
    00
  • JS获取当前网址、主机地址项目根路径

    获取当前网址、主机地址、项目根路径这些信息,常用于前端框架的开发中,例如:设置cookie、动态加载CSS、JS等资源、Ajax请求API等。 获取当前网址 我们可以使用 window.location 对象来获取当前网址,window.location.href 属性可返回当前页面的完整URL,包括协议、主机名、路径和查询部分。 const current…

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