1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    利用前端HTML+CSS+JS開發簡單的TODOLIST功能(記事本)_JavaScript

    來源:腳本之家  責任編輯:小易  

    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操作實例內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持真格學網!

    您可能感興趣的文章:vue.js實例todoList項目基于vuejs實現一個todolist項目利用前端HTML+CSS+JS開發簡單的TODOLIST功能(記事本)Vuejs 實現簡易 todoList 功能 與 組件實例代碼原生JavaScript實現todolist功能vue.js todolist實現代碼Vue.js實現簡單ToDoList 前期準備(一)

  3. 本文相關:
  4. 微信小程序 wx:key詳細介紹
  5. 實現微信小程序的wxml文件和wxss文件在webstrom的支持
  6. 微信小程序 http請求封裝詳解及實例代碼
  7. 微信小程序 this和that詳解及簡單實例
  8. 微信小程序 template模板詳解及實例代碼
  9. 微信小程序頁面開發注意事項整理
  10. thinkphp5微信小程序獲取用戶信息接口的實例詳解
  11. google 地圖api map()構造器詳解
  12. 微信小程序實現頁面跳轉傳值的方法
  13. 微信小程序聯網請求的輪播圖
  14. web前端開發技術。綜合運用HTML, CSS, JavaScrip...
  15. html+css+js小案例(項目源碼)
  16. 求做一個簡單的HTML+CSS+JS的簡單網站
  17. 只會html+css能用JavaScript和jQuery寫出動態頁面...
  18. 網頁開發手記:HTML+CSS+JavaScript實戰詳解
  19. html+css+js能實現什么功能
  20. 要求綜合運用本課程所學的Web前端開發技術(包括HTM...
  21. 做個網站,所要用到的編程語言:前端一般用:HTML+...
  22. 急求一份html、css、JavaScript的一個個人網頁設計...
  23. 前端開發除了html,javascript,css外還需要掌握哪...
  24. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁vue.js實例todolist項目基于vuejs實現一個todolist項目利用前端html+css+js開發簡單的todolist功能(記事本)vuejs 實現簡易 todolist 功能 與 組件實例代碼原生javascript實現todolist功能vue.js todolist實現代碼vue.js實現簡單todolist 前期準備(一)微信小程序 wx:key詳細介紹實現微信小程序的wxml文件和wxss文件在webstrom的支持微信小程序 http請求封裝詳解及實例代碼微信小程序 this和that詳解及簡單實例微信小程序 template模板詳解及實例代碼微信小程序頁面開發注意事項整理thinkphp5微信小程序獲取用戶信息接口的實例詳解google 地圖api map()構造器詳解微信小程序實現頁面跳轉傳值的方法微信小程序聯網請求的輪播圖微信小程序 數組(增,刪,改,查微信小程序 for 循環詳解微信小程序 input輸入框控件詳解微信小程序 input輸入框詳解及簡微信小程序 小程序制作及動畫(a微信小程序 傳值取值的幾種方法總微信小程序中使元素占滿整個屏幕微信小程序 wx.request(接口調用微信小程序 時間格式化(util.fo微信小程序通過api接口將json數據微信小程序 頁面跳轉及數據傳遞詳解javascript中綁定click事件的四種方式介紹微信小程序promsie.all和promise順序執行微信小程序canvas寫字板效果及實例微信小程序手勢操作之單觸摸點與多觸摸點微信小程序(十二)text組件詳細介紹微信小程序 動態綁定事件并實現事件修改樣微信小程序 頁面滑動事件的實例詳解java spring 事務回滾詳解微信小程序中input標簽詳解及簡單實例
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载