任务发布页面html,html5 todo list（待办事项/任务列表管理界面） -凯发k8官方网

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);

}

总结

以上是凯发k8官方网为你收集整理的任务发布页面html,html5 todo list（待办事项/任务列表管理界面）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。