欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用前端HTML+CSS+JS開(kāi)發(fā)簡(jiǎn)單的TODOLIST功能（記事本）

 更新時(shí)間：2021年04月12日 17:17:08   作者：這名沒(méi)人用吧  
這篇文章主要介紹了用HTML+CSS+JS做出簡(jiǎn)單的TODOLIST（記事本）項(xiàng)目,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考下

1、簡(jiǎn)單介紹

在學(xué)習(xí)完HTML、CSS和一些JS后，博主也利用一些空余的時(shí)間的寫(xiě)了一個(gè)關(guān)于JS簡(jiǎn)單應(yīng)用的Demo，主要實(shí)現(xiàn)的是一個(gè)Todolist（類似于記事本）的應(yīng)用，可以實(shí)現(xiàn)數(shù)據(jù)的增、刪、改、查，并且使用localStorage實(shí)現(xiàn)數(shù)據(jù)的本地持久化存儲(chǔ)，具體就接著往下看吧。

2、運(yùn)行截圖

在這里插入圖片描述  

往輸入框里輸入內(nèi)容：

在這里插入圖片描述  

進(jìn)行添加后默認(rèn)添加到未完成一欄：

在這里插入圖片描述

將剛剛添加的事項(xiàng)進(jìn)行修改：

在這里插入圖片描述

修改成功：

在這里插入圖片描述  

將修改成功后的事項(xiàng)設(shè)置成已完成：

在這里插入圖片描述  

對(duì)“干飯”、“睡覺(jué)”進(jìn)行刪除：

在這里插入圖片描述

3、代碼介紹

話不多說(shuō)，先貼上代碼：

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="請(qǐng)輸入代辦事項(xiàng)">
			<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>

主要是分成兩個(gè)部分，一個(gè)是頭部輸入框的部分，還有一個(gè)就是內(nèi)容顯示部分，todocount和donecount表示未完成事項(xiàng)和已完成事項(xiàng)的數(shù)目，list則是顯示具體的事項(xiàng)，這邊默認(rèn)是沒(méi)有的，在js進(jìn)行事項(xiàng)的添加并顯示。

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部分這邊就不贅述啦，博主自認(rèn)為做的很胯，大家有做的話可以自己進(jìn)行一下優(yōu)化。

JS部分：

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

function load() { //加載所有事項(xiàng)的函數(shù)
	var todo = document.getElementById("todolist");//獲取DOM元素
	var done = document.getElementById("donelist");
	var todonum = document.getElementById("todocount");
	var donenum = document.getElementById("donecount");
	var todocontent = "";//設(shè)置初始值
	var donecontent = "";
	var todocount = 0;
	var donecount = 0;
	var list = localStorage.getItem("todolist");//獲取本地上todolist的數(shù)據(jù)
	if (list != null) {//不為空時(shí)
		todolist = JSON.parse(list); //JSON對(duì)象轉(zhuǎn)換為JS對(duì)象 
	} else {
		todolist = [];//置空
	}
	if (todolist != null) {
		for (var i = 0; i < todolist.length; i++) {//遍歷已轉(zhuǎn)化成js對(duì)象的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 + ")>確認(rèn)完成</button>"
				 + "</li>"; //拼接上字符串，以便后續(xù)使用
				 todocount++;//未完成的數(shù)量加一
			} 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++;//已完成的數(shù)量加一
			}
		}
		todo.innerHTML = todocontent;//往todo所代表標(biāo)簽添加內(nèi)容
		done.innerHTML = donecontent;//往done所代表標(biāo)簽添加內(nèi)容
		todonum.innerHTML = todocount;//往todonum所代表標(biāo)簽添加內(nèi)容
		donenum.innerHTML = donecount;//往donenum所代表標(biāo)簽添加內(nèi)容
	} else { //當(dāng)todolist為空時(shí)
		todo.innerHTML = "";
		done.innerHTML = "";
		todonum.innerHTML = 0;
		donenum.innerHTML = 0;
	}
}

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

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

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

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

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

function save(){ //保存事項(xiàng)的函數(shù)
	localStorage.setItem("todolist", JSON.stringify(todolist)); //將JS對(duì)象轉(zhuǎn)化成JSON對(duì)象并保存到本地
	load(); //每次保存完都刷新頁(yè)面
}

這次demo的主要使用就是js部分，因此這邊代碼中的注釋也比較全面了，主要就是增刪改查的幾個(gè)函數(shù)，以及一些初始化的注意事項(xiàng)，還有持久化數(shù)據(jù)的使用，需要注意的是每一個(gè)進(jìn)行修改或者添加后都要進(jìn)行一次保存并重新加載內(nèi)容，不然會(huì)導(dǎo)致內(nèi)容沒(méi)辦法及時(shí)地更新。還有就是這邊如果直接復(fù)制代碼的話，可能會(huì)因?yàn)樵O(shè)備的不同導(dǎo)致樣式上的一些區(qū)別，這邊博主沒(méi)有做跨設(shè)備的處理。

4、總結(jié)

這次的Demo讓我把之前學(xué)過(guò)的大部分知識(shí)都進(jìn)行了一次的應(yīng)用，并且在實(shí)踐的過(guò)程中也將一些已經(jīng)忘記的知識(shí)點(diǎn)進(jìn)行了復(fù)習(xí)，這次的Demo雖然做的不是特別地完善，過(guò)程中也有遇到查資料的情況，但是總體上還是收獲了很多，這邊也建議很多剛開(kāi)始學(xué)習(xí)前端的小白，在學(xué)完一階段后，就要及時(shí)地做一些Demo，畢竟編程更重要的還是實(shí)踐啦。

到此這篇關(guān)于用HTML+CSS+JS做出簡(jiǎn)單的TODOLIST（記事本）的文章就介紹到這了,更多相關(guān)todolist操作實(shí)例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論