Merge pull request #54 from Computerization/Ben-Zhang/vue-todolist

Ben-Zhang's Vue Todolist
Computerization · Dec 25, 2020 · 4500073 · 4500073
2 parents 4b59295 + 7187306
commit 4500073
Show file tree

Hide file tree

Showing 18 changed files with 12,591 additions and 0 deletions.
diff --git a/2020/Ben-Zhang/2020.12.25_VueTodoListReform-VFinal/Main.html b/2020/Ben-Zhang/2020.12.25_VueTodoListReform-VFinal/Main.html
@@ -0,0 +1,65 @@
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>My Todolist</title>
+    <link rel="stylesheet" type="text/css " href="Style.css" />
+    <!-- meta name="viewport" content="width=device-width, initial-scale=1.0, userscalable=no, maximum=1.0, minimum=1.0" /-->
+</head>
+
+<body>
+    <div class="coffee" onclick="toDonation()">
+        <v-seen>
+        <div class="handle"></div>
+        <div class="cup">
+            Buy a cup of coffee for developer!
+        </div>
+    </div>
+    <div class="list" id="toDoList">
+        <div class="todoTitle"> Todo </div>
+        <div class="todo" id="todo" v-for="task in tasklist">
+            <div class="task">
+                <li> {{ task.text }} </li>
+                <div v-bind:onclick="'deleteTask('+task.id+')'" class="deleteButton"> × </div>
+                <div v-bind:onclick="'finishTask('+task.id+')'" class="finishButton"> √ </div>
+            </div>
+            <!--
+            <div class="task" id="2222">
+                <li> 测试1 </li>
+                <div onclick="deleteTask(测试1)" class="deleteButton"> × </div>
+            </div>
+            <div class="task">
+                <li> 测试2 </li>
+                <div onclick="deleteTask(测试2)" class="deleteButton"> × </div>
+            </div>
+            -->
+        </div>
+        <div class="finishedTitle"> Finished </div>
+        <div class="finished" id="finished" v-for="taskf in tasklistFinished">
+            <div class="task">
+                <li> {{ taskf.text }} </li>
+                <div v-bind:onclick="'deleteTaskf('+taskf.id+')'" class="deleteButton"> × </div>
+                <div v-bind:onclick="'definishTask('+taskf.id+')'" class="definishButton"> ← </div>
+            </div>
+        </div>
+    </div>
+    <div class="pencile"></div>
+    <div class="phone">
+        <div class="AddTask">
+            <form name="AddTask">
+                <input type="text" name="taskContent" id="taskContent" />
+            </form>
+            <div class="buttons">
+                <button class="formButtons" onclick="SubmitTask() "> 提交 </button>
+                <button class="formButtons" onclick="saveArray() "> Save </button>
+                <button class="formButtons" onclick="loadArray() "> Load </button>
+            </div>
+        </div>
+        <div class="time" id="time"></div>
+    </div>
+</body>
+
+<script src="vue.js"></script>
+<script src="Script.js "></script>
+
+</html>
diff --git a/2020/Ben-Zhang/2020.12.25_VueTodoListReform-VFinal/Script.js b/2020/Ben-Zhang/2020.12.25_VueTodoListReform-VFinal/Script.js
@@ -0,0 +1,122 @@
+var tasklist = [{ text: '11', id:0 }, { text: '22', id:1 }];
+var tasklistFinished = [];
+
+var toDoList = new Vue({
+    data: {
+        tasklist: tasklist,
+        tasklistFinished: tasklistFinished
+    },
+    el: '#toDoList',
+});
+
+function SubmitTask() {
+    let task = document.getElementById("taskContent").value;
+    // alert(task);
+    if (task == "" || task == " ") {
+        alert("输入不能为空");
+    } else {
+        // 获取时间戳 inspired by: https://www.cnblogs.com/fozero/p/6959946.html
+        timeStamp = (new Date()).valueOf();
+        taskObj = { text: task, id: timeStamp };
+        tasklist.push(taskObj);
+    };
+};
+
+// 通过时间戳或字典系统来存储并识别每个列表元素；以便实现删除或其它功能
+
+function saveArray() {
+    localStorage.clear();
+    list = JSON.stringify(tasklist);
+    listf = JSON.stringify(tasklistFinished);
+    localStorage.setItem("listLength", (tasklist.length));
+    localStorage.setItem("listLengthf", (tasklistFinished.length));
+    localStorage.setItem("tasklistLocal", list);
+    localStorage.setItem("tasklistFinishedLocal", listf);
+};
+
+function loadArray() {
+    tasklist.splice(0, (tasklist.length));
+    tasklistFinished.splice(0, (tasklistFinished.length));
+    list = localStorage.getItem("tasklistLocal");
+    listf = localStorage.getItem("tasklistFinishedLocal");
+    let a = JSON.parse(list);
+    let b = JSON.parse(listf);
+    for (let i = 0; i < localStorage.getItem("listLength"); i++) {
+        tasklist.push(a[i]);
+    };
+    for (let i = 0; i < localStorage.getItem("listLengthf"); i++) {
+        tasklistFinished.push(b[i]);
+    };
+};
+
+//依据元素值删除元素 inspired by: https://www.jb51.net/article/134312.htm
+function deleteTask(taskId) {
+    let targetObj = tasklist.find(obj => (obj.id == taskId));
+    // 箭头函数 设变量obj为数组项，如obj.id等于taskId，返回ture
+    // find方法返回首个为ture的数组项的index
+    let index = tasklist.indexOf(targetObj);
+    if (index > -1) {
+        tasklist.splice(index, 1);
+        // console.log(index);
+    } else {
+        alert("任务名称错误");
+        // console.log(index);
+    };
+    saveArray();
+};
+
+function finishTask(taskId) {
+    let targetObj = tasklist.find(obj => obj.id == taskId);
+    let index = tasklist.indexOf(targetObj);
+    if (index > -1) {
+        tasklistFinished.push(tasklist[index]);
+        tasklist.splice(index, 1);
+    } else {
+        alert("任务名称错误");
+    };
+    saveArray();
+};
+
+function deleteTaskf(taskId) {
+    let targetObj = tasklistFinished.find(obj => obj.id == taskId);
+    let index = tasklistFinished.indexOf(targetObj);
+    if (index > -1) {
+        tasklistFinished.splice(index, 1);
+    } else {
+        alert("任务名称错误");
+    };
+    saveArray();
+};
+
+function definishTask(taskId) {
+    let targetObj = tasklistFinished.find(obj => obj.id == taskId);
+    let index = tasklistFinished.indexOf(targetObj);
+    if (index > -1) {
+        tasklist.push(tasklist[index]);
+        tasklistFinished.splice(index, 1);
+    } else {
+        alert("任务名称错误");
+    };
+    saveArray();
+};
+
+loadArray();
+
+function date() {
+    let date = new Date();
+    let week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    let year = date.getFullYear().toString();
+    let month = (date.getMonth() + 1).toString();
+    let day = date.getDate().toString();
+    let hour = date.getHours().toString();
+    let minute = date.getMinutes().toString();
+    let second = date.getSeconds().toString();
+    let weekn = date.getDay().toString();
+    document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日</br>" + week[weekn] + "</br>" + hour + ":" + minute + ":" + second;
+};
+date();
+setInterval("date()", 1000);
+
+function toDonation() {
+    location.href = "donation.html";
+};