　　本文介紹採用php、mysql和javascript開發懸賞任務小程式原始碼，我們可以在系統中新增任務、刪除任務和編輯它們。Pure(Vanilla) JavaScript 已被使用，我們還將大量使用 DOM 操作，因此主要先決條件之一是HTML|DOM。

　　倉庫完整原始碼：wk.wxlbyx.icu

　　原始碼檔案結構：

　　index.html

　　styles.css

　　list.js

　　●index.html

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<title>Task Tracker</title>
　　<link rel="stylesheet" href="styles.css" type="text/css"
　　media="screen" charset="utf-8">
　　</head>
　　<body>
　　<div class="container">
　　<p>
　　<label for="new-task" class="middle">Add Task</label>
　　<input id="new-task" type="text"><button>Add Task</button>
　　</p>
　　<h3 class="middle">Todo</h3>
　　<ul id="incomplete-tasks">
　　</ul>
　　<h3 class="middle">Completed Tasks</h3>
　　<ul id="completed-tasks">
　　</ul>
　　</div>
　　<script type="text/javascript" src="list.js"></script>
　　</body>
　　</html>

　　說明：

　　上面的 HTML 程式碼包含簡單的列表標籤和一個文字欄位，我們將在新增、刪除任務時填充文字。分配了某些類，我們在透過 DOM 獲取特定元素或透過在 styles.css 檔案中對其進行樣式設定時使用這些類。以上所有內容都在一個具有“容器”類的 div 中，該類具有自己的樣式和屬性。

　　●styles.css

　　/* Basic Style */
　　body {
　　background: #ecf0f1;
　　color: #333;
　　font-family: Lato, sans-serif;
　　}
　　.container {
　　display: block;
　　width: 500px;
　　margin: 50px auto 0;
　　}
　　ul {
　　margin: 0;
　　padding: 0;
　　}
　　li * {
　　float: left;
　　}
　　li,
　　h3 {
　　clear: both;
　　list-style: none;
　　}
　　input,
　　button {
　　outline: none;
　　}
　　button {
　　background: none;
　　border: 0px;
　　color: #888;
　　font-size: 15px;
　　width: 100px;
　　margin: 10px 0 0;
　　font-family: Lato, sans-serif;
　　cursor: pointer;
　　}
　　button:hover {
　　color: #333;
　　}
　　/* Heading */
　　h3,
　　label[for='new-task'] {
　　color: #333;
　　font-weight: 700;
　　font-size: 15px;
　　border-bottom: 2px solid #333;
　　padding: 30px 0 10px;
　　margin: 0;
　　text-transform: uppercase;
　　}
　　input[type="text"] {
　　margin: 0;
　　font-size: 18px;
　　line-height: 18px;
　　height: 18px;
　　padding: 10px;
　　border: 1px solid #ddd;
　　background: #fff;
　　border-radius: 6px;
　　font-family: Lato, sans-serif;
　　color: #888;
　　}
　　input[type="text"]:focus {
　　color: #333;
　　}
　　.middle {
　　text-align: center;
　　}
　　/* New Task */
　　label[for='new-task'] {
　　display: block;
　　margin: 0 0 20px;
　　}
　　input#new-task {
　　float: right;
　　width: 318px;
　　}
　　p>button:hover {
　　color: #0FC57C;
　　}
　　/* Task list */
　　li {
　　overflow: hidden;
　　padding: 20px 0;
　　border-bottom: 1px solid #eee;
　　}
　　li>input[type="checkbox"] {
　　margin: 0 10px;
　　position: relative;
　　top: 15px;
　　}
　　li>label {
　　font-size: 18px;
　　line-height: 40px;
　　width: 237px;
　　padding: 0 0 0 11px;
　　}
　　li>input[type="text"] {
　　width: 226px;
　　}
　　li>.delete:hover {
　　color: #CF2323;
　　}
　　/* Completed */
　　#completed-tasks label {
　　text-decoration: line-through;
　　color: #888;
　　}
　　/* Edit Task */
　　ul li input[type=text] {
　　display: none;
　　}
　　ul li.editMode input[type=text] {
　　display: block;
　　}
　　ul li.editMode label {
　　display: none;
　　}

　　注意：以上 HTML 和 CSS 檔案主要用於演示部分。

　　●list.js

　　// Add a new task.
　　let taskInput = document.getElementById("new-task");
　　// first button
　　let addButton = document.getElementsByTagName("button")[0];
　　// ul of #incomplete-tasks
　　let incompleteTaskHolder = document.getElementById("incomplete-tasks");
　　// completed-tasks
　　let completedTasksHolder = document.getElementById("completed-tasks");
　　/*---- Part 1 ----*/
　　// function to create new task item
　　let createNewTaskElement = function (taskString) {
　　let listItem = document.createElement("li");
　　// input (checkbox)
　　let checkBox = document.createElement("input"); // checkbox
　　// label
　　let label = document.createElement("label"); // label
　　// input (text)
　　let editInput = document.createElement("input"); // text
　　// button.edit
　　let editButton = document.createElement("button"); // edit button
　　// button.delete
　　let deleteButton = document.createElement("button"); // delete button
　　label.innerText = taskString;
　　// Each elements, needs appending
　　checkBox.type = "checkbox";
　　editInput.type = "text";
　　// innerText encodes special characters, HTML does not.
　　editButton.innerText = "Edit";
　　editButton.className = "edit";
　　deleteButton.innerText = "Delete";
　　deleteButton.className = "delete";
　　// and appending.
　　listItem.appendChild(checkBox);
　　listItem.appendChild(label);
　　listItem.appendChild(editInput);
　　listItem.appendChild(editButton);
　　listItem.appendChild(deleteButton);
　　return listItem;
　　}
　　/*---- Part 2 ----*/
　　let addTask = function () {
　　console.log("Add Task...");
　　let listItem = createNewTaskElement(taskInput.value);
　　if (taskInput.value == "") {
　　return;
　　}
　　// Append listItem to incompleteTaskHolder
　　incompleteTaskHolder.appendChild(listItem);
　　bindTaskEvents(listItem, taskCompleted);
　　taskInput.value = "";
　　}
　　/*---- Part 3 ----*/
　　let editTask = function () {
　　console.log("Edit Task...");
　　console.log("Change 'edit' to 'save'");
　　let listItem = this.parentNode;
　　let editInput = listItem.querySelector('input[type=text]');
　　let label = listItem.querySelector("label");
　　let containsClass = listItem.classList.contains("editMode");
　　// If class of the parent is .editmode
　　if (containsClass) {
　　label.innerText = editInput.value;
　　} else {
　　editInput.value = label.innerText;
　　}
　　listItem.classList.toggle("editMode");
　　}
　　/*---- Part 4 ----*/
　　let deleteTask = function () {
　　console.log("Delete Task...");
　　let listItem = this.parentNode;
　　let ul = listItem.parentNode;
　　// Remove the parent list item from the ul.
　　ul.removeChild(listItem);
　　}
　　/*---- Part 5 ----*/
　　let taskCompleted = function () {
　　console.log("Complete Task...");
　　// Append the task list item to the #completed-tasks
　　let listItem = this.parentNode;
　　completedTasksHolder.appendChild(listItem);
　　bindTaskEvents(listItem, taskIncomplete);
　　}
　　/*---- Part 6 ----*/
　　let taskIncomplete = function () {
　　console.log("Incomplete Task...");
　　// Mark task as incomplete.
　　let listItem = this.parentNode;
　　incompleteTaskHolder.appendChild(listItem);
　　bindTaskEvents(listItem, taskCompleted);
　　}
　　/*---- Part 7 ----*/
　　addButton.onclick = addTask;
　　addButton.addEventListener("click", addTask);
　　let bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
　　console.log("bind list item events");
　　// select ListItems children
　　let checkBox = taskListItem.querySelector("input[type=checkbox]");
　　let editButton = taskListItem.querySelector("button.edit");
　　let deleteButton = taskListItem.querySelector("button.delete");
　　// Bind editTask to edit button.
　　editButton.onclick = editTask;
　　// Bind deleteTask to delete button.
　　deleteButton.onclick = deleteTask;
　　// Bind taskCompleted to checkBoxEventHandler.
　　checkBox.onchange = checkBoxEventHandler;
　　}
　　/*---- Part 8 ----*/
　　// cycle over incompleteTaskHolder ul list items
　　// for each list item
　　for (let i = 0; i < incompleteTaskHolder.children.length; i++) {
　　// bind events to list items children(tasksCompleted)
　　bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);
　　}
　　// cycle over completedTasksHolder ul list items
　　for (let i = 0; i < completedTasksHolder.children.length; i++) {
　　// bind events to list items children(tasksIncompleted)
　　bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
　　}

　　解釋

　　第1部分

　　這個函式的工作方式是它接受'inputString' ，即我們在HTML 文字欄位中作為任務傳遞的文字，然後它使用DOM 屬性建立幾個元素並將它們附加到特定的類中。追加後，我們將列表中的所有元素作為 listItems 插入。

　　第2部分

　　當我們單擊按鈕“addButton”（第 115 行）時呼叫此 addTask 函式，然後在其中我們使用使用者輸入的值建立一個 listItem，然後檢查該值，因為它不能是空字串，然後我們只需新增在“inputTaskHolder”中的上述值，最後在呼叫“bindFunction”之前將其中的值設定為空字串。

　　第3部分

　　此程式碼功能用於編輯現有任務，我們這樣做會跟蹤父節點，然後進行簡單的 if-else 檢查是否單擊了“editMode”按鈕，如果單擊則只需分配標籤的值innerText 到 editInput 內部的值，如果不是則反之亦然。然後在編輯之後，我們切換我們編輯的“editMode”的值。

　　第4部分

　　在這一部分中，我們透過使用當前節點的父節點，然後儲存父節點的父節點，然後簡單地刪除該節點的子節點來刪除任務以及我們執行此操作的方式。

　　第5部分

　　在此函式中，我們只需將父節點的子節點附加到 completeTaskHolder 元素中，然後呼叫 bindFunction 即可將任務標記為完成。

　　第6部分

　　在這個函式中，我們透過簡單地將父節點的子節點附加到 inCompleteTaskHolder 元素中，然後呼叫 bindFunction 將任務標記為未完成。

　　第7部分

　　在這一部分中，我們呼叫 BindFunction 來響應幾個使用者互動活動並使幾個按鈕工作。

　　第8部分

　　在最後一節中，我們在不完整和完整的 TaskHolder 元素中使用 for 迴圈遍歷繫結子級的幾個部分。

　　輸出：（新增任何任務之前）

　　輸出：（新增任務後）

　　輸出：（完成任務後）

懸賞任務小程式原始碼（開源php系統）

相關文章