Skip to content

Commit

Permalink
Merge pull request #49 from GeMini-220/master
Browse files Browse the repository at this point in the history 
Add files via upload
  • Loading branch information
@Josh-Cena
Josh-Cena authored Nov 17, 2020
2 parents 5870b8c + 0aba3bc commit a4e2665
Show file tree
Hide file tree
Showing 10 changed files with 515 additions and 0 deletions.
52 changes: 52 additions & 0 deletions 2020/Ben-Zhang/2020.11.17_TodoListWebPage/V5/Main.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<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">
<div class="handle"></div>
<div class="cup"></div>
</div>
<div class="list">
<div class="todoTitle"> Todo </div>
<div class="todo" id="todo">
<!--
<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">

</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()" id="submit"> Submit </button>
<button class="formButtons" onclick="saveData()" id="save"> Save </button>
<button class="formButtons" onclick="loadData()" id="load"> Load </button>
</div>
</div>
<div class="time" id="time"></div>
</div>
</body>

<script src="Script.js "></script>

</html>
138 changes: 138 additions & 0 deletions 2020/Ben-Zhang/2020.11.17_TodoListWebPage/V5/Script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
let tasklist = [];
let tasklistFinished = [];

/* function SubmitTaskOld() {
let task = document.getElementById("taskContent").value;
let newElement = document.createElement("li");
let todolist = document.getElementById("todo");
if (task == "" || task == " ") {
alert("输入不能为空")
} else {
newElement.innerText = task;
todolist.appendChild(newElement);
};
} */

// 这里Render函数需要create一整套div而不是单一个li
function Render() {
let todolist = document.getElementById("todo");
todolist.innerHTML = "";
let finishedlist = document.getElementById("finished");
finishedlist.innerHTML = "";
for (let i in tasklist) {
let newElement = document.createElement("div");
newElement.className = "task";
// console.log(tasklist[i]);
newElement.innerHTML = "<li class='taskContent'>" + tasklist[i] + "</li> <div onclick=\"deleteTask(\'" + tasklist[i] + "\')\"" + "class='deleteButton'> × </div>" + "<div onclick=\"finishTask(\'" + tasklist[i] + "\')\"" + "class='finishButton'> √ </div>";
todolist.appendChild(newElement);
};
for (let i in tasklistFinished) {
let newElement = document.createElement("div");
newElement.className = "taskFinished";
newElement.innerHTML = "<li class='taskContentf'>" + tasklistFinished[i] + "</li> <div onclick=\"deleteTaskf(\'" + tasklistFinished[i] + "\')\"" + "class='deleteButtonf'> × </div>";
finishedlist.appendChild(newElement);
};
}

function SubmitTask() {
let task = document.getElementById("taskContent").value;
// alert(task);
if (task == "" || task == " ") {
alert("输入不能为空");
} else {
tasklist.push(task);
Render();
};
// alert(tasklist);
}

// 通过时间戳或字典系统来存储并识别每个列表元素；以便实现删除或其它功能

/* function saveDataOld() {
let todolist = document.getElementById("todo");
alert(todolist.innerHTML);
localStorage.setItem("list", todolist.innerHTML);
}
function loadDataOld() {
let list = localStorage.getItem("list");
// alert(list);
let todolist = document.getElementById("todo");
todolist.innerHTML = list;
} */

function saveData() {
localStorage.clear();
localStorage.setItem("listLength", tasklist.length);
localStorage.setItem("listLengthf", tasklistFinished.length);
for (let i in tasklist) {
localStorage.setItem("list_"+ String(i) , tasklist[i]);
};
for (let i in tasklistFinished) {
localStorage.setItem("listf_"+ String(i) , tasklistFinished[i]);
};
};

function loadData() {
tasklist.splice(0, tasklist.length);
tasklistFinished.splice(0, tasklistFinished.length);
for (let i = 0; i < localStorage.getItem("listLength"); i++) {
tasklist.push(localStorage.getItem("list_"+ String(i)));
};
for (let i = 0; i < localStorage.getItem("listLengthf"); i++) {
tasklistFinished.push(localStorage.getItem("listf_"+ String(i)));
};
Render();
}

//依据元素值删除元素 inspired by: https://www.jb51.net/article/134312.htm
function deleteTask(taskName) {
let index = tasklist.indexOf(taskName);
if (index > -1) {
tasklist.splice(index,1);
// console.log(index);
Render();
} else {
alert("任务名称错误");
// console.log(index);
};
};

function finishTask(taskName) {
let index = tasklist.indexOf(taskName);
if (index > -1) {
tasklistFinished.push(tasklist[index]);
tasklist.splice(index,1);
Render();
} else {
alert("任务名称错误");
};
};

function deleteTaskf(taskName) {
let index = tasklistFinished.indexOf(taskName);
if (index > -1) {
tasklistFinished.splice(index,1);
Render();
} else {
alert("任务名称错误");
};
};

loadData()

//实时系统时间提取 inspired by:https://www.cnblogs.com/yidaixiaohui/p/7742746.html
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)
Loading

0 comments on commit a4e2665

Please sign in to comment.