利用前端HTML+CSS+JS開發簡單的TODOLIST功能（記事本）

Posted on by

1、簡單介紹

在學習完HTML、CSS和一些JS後，博主也利用一些空餘的時間的寫瞭一個關於JS簡單應用的Demo，主要實現的是一個Todolist（類似於記事本）的應用，可以實現數據的增、刪、改、查，並且使用localStorage實現數據的本地持久化存儲，具體就接著往下看吧。

2、運行截圖

在這裡插入圖片描述

  

往輸入框裡輸入內容：

在這裡插入圖片描述  

進行添加後默認添加到未完成一欄：

在這裡插入圖片描述

將剛剛添加的事項進行修改：

在這裡插入圖片描述

修改成功：

在這裡插入圖片描述  

將修改成功後的事項設置成已完成：

在這裡插入圖片描述  

對“幹飯”、“睡覺”進行刪除：

在這裡插入圖片描述

3、代碼介紹

話不多說，先貼上代碼：

HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TodoList</title>
		<link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" />
	</head>
	<body>
		<!-- header -->
		<div id="header">
			<label class="text">TodoList</label>
			<input id="todo" class="head" type="text" placeholder="請輸入代辦事項">
			<button id="add" class="add" onclick="add()">添加</button>
		</div>
		<!-- content -->
		<div id="container">
			<h1 class="title">未完成</h1>
			<span id="todocount"></span>
			<ol id="todolist">
			</ol>
			<h1 class="title">已完成</h1>
			<span id="donecount"></span>
			<ol id="donelist">
			</ol>
		</div>
	</body>
	<script type="text/javascript" src="index.js"></script>
</html>

主要是分成兩個部分，一個是頭部輸入框的部分，還有一個就是內容顯示部分，todocount和donecount表示未完成事項和已完成事項的數目，list則是顯示具體的事項，這邊默認是沒有的，在js進行事項的添加並顯示。

CSS部分：

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #b8c9ff;
}

#header {
	margin: 0 auto;
	font-size: 50px;
	width: 700px;
	text-align: center;
	height: 150px;
}

.title {
	display: inline-flex;
}

.head {
	-webkit-appearance: none;
	border-radius: 25px;
	width: 500px;
	height: 60px;
	box-shadow: 5px 5px 10px #556677;
	border: 1px solid #556677;
	font-size: 30px;
	padding-left: 25px;
	outline: 0;
	margin: 0 auto;
	display: inline-flex;
}

.add {
	width: 80px;
	height: 50px;
	border-radius: 25px;
	outline: 0;
	border: 1 solid #556677;
	float: right;
	margin: 20px 0 0;
	font-size: 20px;
}

#container {
	margin: 0 auto;
	width: 700px;
	height: 150px;
}

.del {
	width: 120px;
	height: 70px;
	border-radius: 25px;
	outline: 0;
	border: 1 solid #556677;
	font-size: 20px;
	display: flex;
	margin: 0 auto;
}

ol {
	margin-top: 20px;
	margin-bottom: 20px;
}

ol li {
	width: 600px;
	height: 30px;
	background-color: #fff;
	list-style: none;
	text-align: center;
	font-size: 20px;
	border-radius: 25px;
	margin-top: 10px;
	padding: 10px;
	box-shadow: 5px 5px 10px #556677;
}

ol li span {
	float: left;
}

ol li button {
	float: right;
	width: 70px;
	height: 30px;
	margin-top: 0px;
	margin-left: 10px;
	border-radius: 25px;
	box-shadow: 5px 5px 10px #556677;
	outline: 0;
}

.del1 {
	background-color: #f40;
	border-radius: 25px;
	width: 50px;
	height: 30px;
	box-shadow: 5px 5px 10px #556677;
	outline: 0;
}

.edit {
	background-color: royalblue;
	border-radius: 25px;
	width: 50px;
	height: 30px;
	box-shadow: 5px 5px 10px #556677;
	outline: 0;
	color: #FFFFFF;
}

#todocount {
	width: 30px;
	height: 30px;
	background-color: #FFFFFF;
	display: inline-block;
	border-radius: 50%;
	float: right;
	font-size: 1em;
	margin-top: 10px;
	text-align: center;
	line-height: 30px;
}

#donecount {
	width: 30px;
	height: 30px;
	background-color: #FFFFFF;
	display: inline-block;
	border-radius: 50%;
	float: right;
	font-size: 1em;
	margin-top: 10px;
	text-align: center;
	line-height: 30px;
}

CSS部分這邊就不贅述啦，博主自認為做的很胯，大傢有做的話可以自己進行一下優化。

JS部分：

window.addEventListener("load", load); //頁面加載完調用load函數，即頁面的初始化
document.getElementById("todo").onkeypress = function (event) {
	if (event.keyCode === 13) {/*13表示按下回車*/
		add(event);
	}
};
var todolist;//定義全局變量

function load() { //加載所有事項的函數
	var todo = document.getElementById("todolist");//獲取DOM元素
	var done = document.getElementById("donelist");
	var todonum = document.getElementById("todocount");
	var donenum = document.getElementById("donecount");
	var todocontent = "";//設置初始值
	var donecontent = "";
	var todocount = 0;
	var donecount = 0;
	var list = localStorage.getItem("todolist");//獲取本地上todolist的數據
	if (list != null) {//不為空時
		todolist = JSON.parse(list); //JSON對象轉換為JS對象 
	} else {
		todolist = [];//置空
	}
	if (todolist != null) {
		for (var i = 0; i < todolist.length; i++) {//遍歷已轉化成js對象的todolist
			if (todolist[i].done == false) {//done為false即還未完成的情況
				todocontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>修改</button>" + 
				 "<button οnclick=" + "del(" + i + ") class='del1'>刪除</button>" +
				"<button οnclick=" + "changedone(" + i + ")>確認完成</button>"
				 + "</li>"; //拼接上字符串，以便後續使用
				 todocount++;//未完成的數量加一
			} else {
				donecontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>修改</button>" +
				"<button οnclick=" + "del(" + i + ") class='del1'>刪除</button>" + 
				"<button οnclick=" + "changetodo(" + i + ")>取消完成</button>"
				+ "</li>";
				donecount++;//已完成的數量加一
			}
		}
		todo.innerHTML = todocontent;//往todo所代表標簽添加內容
		done.innerHTML = donecontent;//往done所代表標簽添加內容
		todonum.innerHTML = todocount;//往todonum所代表標簽添加內容
		donenum.innerHTML = donecount;//往donenum所代表標簽添加內容
	} else { //當todolist為空時
		todo.innerHTML = "";
		done.innerHTML = "";
		todonum.innerHTML = 0;
		donenum.innerHTML = 0;
	}
}

function add(e) { //添加事項的函數
	var newtodo = {
		todo: "", //用戶輸入的內容
		done: false //done表示是否完成該事項
	};
	var temp = document.getElementById("todo").value; //使用temp存儲id為todo標簽的value值
	if (temp.length == 0 && temp.trim() == "") { //當輸入為空時
		alert('輸入事項不能為空');
		return;
	}
	var flag = confirm('您確定要添加該事項嗎?');//彈出確認框
	if(flag){//選擇是
		newtodo.todo = temp; //將temp值賦給newtodo對象的todo屬性
		todolist.push(newtodo); //往todolist中添加對象
		document.getElementById("todo").value = ""; //對輸入框進行初始化
		save(); //保存
		alert('添加成功');
	}else{
		alert('操作出錯');
		return ;
	}
}

function changedone(i){ //將未完成的事項改變成已完成
	var flag = confirm('您確定要完成該事項嗎?');
	if(flag){
		todolist[i].done = true; //改變done的狀態
		save();
		alert('修改成功');
	}else{
		alert('操作出錯');
		return ;
	}
}

function changetodo(i){ //將已完成的事項改變成未完成
	var flag = confirm('您確定要取消完成該事項嗎?');
	if(flag){
		todolist[i].done = false;//改變done的狀態
		save();
		alert('修改成功');
	}else{
		alert('操作出錯');
		return ;
	}
}

function edit(i) { //修改事項的內容
	var temp = prompt("請輸入你想要修改的內容",todolist[i].todo); 
	if(temp != null && temp.trim() != ""){//當修改後內容不為空時
		todolist[i].todo = temp; //修改內容
		alert('修改成功');
		save();
	}else{
		alert('輸入字符串為空,修改失敗');
	}
}

function del(i) { //刪除相應的事項
	var flag = confirm('您確定要刪除該事項嗎?');
	if(flag){
		todolist.splice(i, 1); //刪除掉指定的一個元素
		save();
		alert('刪除成功');
	}else{
		alert('操作出錯');
		return ;
	}
}

function save(){ //保存事項的函數
	localStorage.setItem("todolist", JSON.stringify(todolist)); //將JS對象轉化成JSON對象並保存到本地
	load(); //每次保存完都刷新頁面
}

這次demo的主要使用就是js部分，因此這邊代碼中的註釋也比較全面瞭，主要就是增刪改查的幾個函數，以及一些初始化的註意事項，還有持久化數據的使用，需要註意的是每一個進行修改或者添加後都要進行一次保存並重新加載內容，不然會導致內容沒辦法及時地更新。還有就是這邊如果直接復制代碼的話，可能會因為設備的不同導致樣式上的一些區別，這邊博主沒有做跨設備的處理。

4、總結

這次的Demo讓我把之前學過的大部分知識都進行瞭一次的應用，並且在實踐的過程中也將一些已經忘記的知識點進行瞭復習，這次的Demo雖然做的不是特別地完善，過程中也有遇到查資料的情況，但是總體上還是收獲瞭很多，這邊也建議很多剛開始學習前端的小白，在學完一階段後，就要及時地做一些Demo，畢竟編程更重要的還是實踐啦。

到此這篇關於用HTML+CSS+JS做出簡單的TODOLIST（記事本）的文章就介紹到這瞭,更多相關todolist操作實例內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

    None Found