懸賞任務小程式原始碼（開源php系統）
本文介紹採用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 迴圈遍歷繫結子級的幾個部分。
輸出：（新增任何任務之前）
輸出：（新增任務後）
輸出：（完成任務後）
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69976881/viewspace-2890778/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 懸賞任務系統原始碼_任務接單平臺原始碼PHP版附app原始碼PHPAPP
- 開源專案Bug懸賞任務
- 開源任務懸賞接單平臺前後端開發搭建後端
- 【全開源】AJAX家政系統原始碼小程式前後端開源原始碼原始碼後端
- 開源小程式原始碼原始碼
- CRM系統原始碼下載PHP全開源搭建原始碼PHP
- 線上客服系統原始碼-開源PHP版（開源im即時通訊原始碼）原始碼PHP
- im原始碼uniapp下載[php開源系統]+搭建教程原始碼APPPHP
- Android開源框架原始碼鑑賞：VirtualAPKAndroid框架原始碼APK
- Android開源框架原始碼鑑賞：EventBusAndroid框架原始碼
- AI智慧名片原始碼系統,智慧電子名片小程式PHP原始碼2開製作價格AI原始碼PHP
- 【逆水寒】多方任務系統的資訊架構與行為引導設計——以懸賞系統為例架構
- Laravel 團隊任務管理系統（已開源）Laravel
- PHP 開發淘寶代購系統原始碼 + 代購程式原始碼 + 代購集運系統PHP原始碼
- CRMEB知識付費程式系統原始碼 全開源原始碼
- TP開發任務外包系統，仿一品威客網站模板，PHP眾包任務系統網站PHP
- 微軟：懸賞10萬美金破解 Linux 系統微軟Linux
- 微商城小程式系統原始碼開發搭建前景和公司原始碼
- 知識付費系統原始碼基於PHP開源的網站內容付費原始碼原始碼PHP網站
- 8 個最佳的開源任務管理系統（附打分）
- 開源分散式任務排程系統就選：DolphinScheduler分散式
- 超酷的開源任務協作系統，我粉了
- 碼雲|PHP TOP5開源小程式商城盤點PHP
- 開源線上客服系統（支援H5的線上客服系統原始碼基於PHP）H5原始碼PHP
- LiteOS-任務篇-原始碼分析-系統啟動函式原始碼函式
- 微信小程式系統獨立原始碼部署微信小程式原始碼
- PHP檔案分享系統原始碼PHP原始碼
- 部落格園眾包平臺：嵌入式開發任務懸賞5萬，招募開發者接單
- php:多程式執行任務PHP
- PHP 多程式處理任務PHP
- 直播系統原始碼，實現倒數計時，定時任務原始碼
- php線上客服系統原始碼二次開發PHP原始碼
- TPshop2.0 免費開源商城系統原始碼原始碼
- 任務系統之Jenkins子任務Jenkins
- 仿糗事百科笑話系統原始碼，PHP笑話系統原始碼原始碼PHP
- 上門維護服務小程式開發原始碼部署原始碼
- ThinkPHP開源部落格系統，樣子請自行欣賞PHP
- 短影片軟體系統開發：選擇開源原始碼原始碼