任务发布页面html,HTML5 Todo List(待办事项/任务列表管理界面)
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completedTasksHolder = document.getElementById("completed-tasks");
//New Task List Item
var createNewTaskElement = function(taskString) {
//Create List Item
var listItem = document.createElement("li");
//input (checkbox)
var checkBox = document.createElement("input");
//label
var label = document.createElement("label");
//input (text)
var editInput = document.createElement("input");
//button.edit
var editButton = document.createElement("button");
//button.delete
var deleteButton = document.createElement("button");
//Each element, needs modifying
checkBox.type = "checkbox";
editInput.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
label.innerText = taskString;
//Each elemts need appending
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
//Add a new task
var addTask = function() {
console.log("Add task");
// When button is pressed
// Create new list item with the text from the new task
var listItem = createNewTaskElement(taskInput.value);
//Append listItem to incompleteTasksHolder
if (taskInput.value.length > 0) {
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
taskInput.value = "";
}
}
// Edit an existing task
var editTask = function() {
console.log("Edit task");
var listItem = this.parentNode;
var editButton = this;
var editInput = listItem.querySelector("input[type=text]");
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
//if the class of the parent is .editMode
if (containsClass) {
//Switch from .editMode
//Label text become input's (text) value
label.innerText = editInput.value;
editButton.innerText = "Edit";
} else {
//switch to .editMode
//input (text) value becomes label's text
editInput.value = label.innerText;
editButton.innerText = "Save";
}
//Toggle .editMode on the li
listItem.classList.toggle("editMode");
}
// Delete and existing task
var deleteTask = function() {
console.log("Delete task");
var listItem = this.parentNode;
var ul = listItem.parentNode;
//Remove the parent
from ul
ul.removeChild(listItem);
}
// Mark a task a task as complete
var taskCompleted = function() {
console.log("Task complete");
//Append the task li to the #completed-tasks
var listItem = this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
}
// Mark a task as incomplete
var taskIncomplete = function() {
console.log("Task incomplete");
//Append the task li to #incomplete-tasks
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
console.log("Bind list item events");
//select taskListItems's children
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
//bind editTask to edit button
editButton.onclick = editTask;
//bind deleteTask to the delete button
deleteButton.onclick = deleteTask;
//bind checkboxEventHandler to the checkbox
checkBox.onchange = checkBoxEventHandler;
}
//Set the click handler to the addTask function
addButton.addEventListener("click", addTask);
//cycle over incompleteTasksHolder ul list items
for (var i = 0; i < incompleteTasksHolder.children.length; i++) {
//bind events to list item's children (taskCompleted)
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}
//cycle over completedTasksHolder ul list items
for (var i = 0; i < completedTasksHolder.children.length; i++) {
//bind events to list item's children (taskIncomplete)
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}
任务发布页面html,HTML5 Todo List(待办事项/任务列表管理界面)相关推荐
- todo已完成任务_todo任务管理器-Oka Todo for mac(待办事项任务列表应用 )v1.0.8免费版...
Oka Todo for Mac是一款 Todo 待办事项任务列表应用,它让任务管理变得轻松又简单.Oka Todo拥有快速创建和组织任务,为任务设定不同的组别,创建带有提醒和截止日期,用循环规则创建 ...
- linux 待办事项_Linux桌面的4个待办事项列表管理器
linux 待办事项 啊,卑微的待办事项清单. 如果使用不当,它将成为压力的源头和拖延的诱因. 如果使用得当,待办事项列表可以帮助您专注于需要做的事情. 保留待办事项清单的方法有几种. 您可以使用笔和 ...
- html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面
[实例简介] 基于HTML5+css+JS的精美登陆注册界面------------------------------- [实例截图] [核心代码] login4 ├── index.html ├─ ...
- 超简单的待办事项列表管理器todo
什么是 todo ? todo 是一个自托管的 todo web 应用程序,可让您以简单且最少的方式跟踪您的 todo.
- emacs .emacs_使用Emacs进行社交并跟踪您的待办事项列表
emacs .emacs 去年,我为您带来了19天的2019年新(给您)生产力工具.今年,我采用了不同的方法:使用您可能会使用的工具构建一个环境,使您在新的一年中提高生产力或可能尚未使用. 使用Ema ...
- 小而美的ToDo 待办事项便签工具,高效管理工作生活一切琐事
现在工作生活节奏比较快,每个人都琐事繁多压力山大,为了高效管理工作生活中的琐事,各类便签工具比较多.而每个人的工作生活习惯跟需求都不一样,因此每款应用都有不同的适合人群. 如果想要一款根据小而美的TO ...
- 从零入门 HTML、CSS、JS、React,构建 ToDo 待办事项管理项目!
在今天,前端工程师已经成为研发体系中的重要岗位之一.可是与此相对的是,极少大学的计算机专业愿意开设前端课程,大部分前端工程师的知识,也都是在实践和工作中不断学习的. 最近收到很多同学的后台留言,说希望 ...
- 原生vue.js实现待办事项清单,支持增删改查
源码部分: <!DOCTYPE html> <html lang="en"> <head><!--设置页面的utf-8编码格式--> ...
- 系统待办事项设计_B端产品工作台设计详解
编辑导语:B端产品的设计更多地是为了提高企业员工的工作效率,而工作台的设计则是为了提高员工使用B端产品的效率,因此,工作台对B端产品而言具有非常重要的意义:本文作者详细介绍了B端产品工作台设计内容. ...
最新文章
- python3 scrapy中文文档_Scrapy官方文档笔记
- LaTex中编辑公式的上下角标出现的问题---允许{}的嵌套吗?
- Spring 下,关于动态数据源的事务问题的探讨
- 剑指offer:反转链表 python实现
- Linux命令(15)——hostname、wc、ps、kill
- 使用CRT调试内存分配堆来找出未释放的内存空间
- 初一模拟赛总结(3.23)
- WebSocket和Java
- Nachos 用户进程地址分配
- C语言 指针访问数组,C语言通过指针引用数组
- java pojo属性,java中的POJO类属性建议使用包装数据类型
- 怎么用计算机打游戏视频,网吧电脑可以边玩游戏边录视频吗?这样的方法很少人知道...
- 全网最全的私网多种穿透互联技术解析
- JS 实现数字转罗马数字
- 我慌了!我妈从床底掏出了我珍藏多年的小本本-----JAVA_Lambda表达式(笔记)
- Excel VBA 多条件筛选及汇总统计
- fatal: destination path '.' already exists and is not an empty directory. 错误及解决办法
- 天润融通牵手葵网新保险电销青睐云呼叫
- SwitchySharpssh on Chrome-Linux
- 如何将mac用到极致
热门文章
- main()与_tmain()区别
- python基础语法手册_说一说python中的几个基础语法
- 如何查看计算机配置和名称,如何查看电脑本机配置和跑分
- Cpp 对象模型探索 / 虚函数表和虚函数表指针的创建时机
- 怎么删除计算机c盘应用程序,如何删除C盘的垃圾文件!!
- Rethinking算法实习生
- apt来安装mysql5.7,linux系统ubuntu18.04安装mysql 5.7
- vue.config.js配置
- spark中local模式与cluster模式使用场景_Spark 知识点 ( 架构 RDD Task )
- Android 中shape的使用(圆角矩形)