利用前端HTML+CSS+JS開發(fā)簡單的TODOLIST功能（記事本）
更新時間：2021年04月12日 17:17:08 作者：這名沒人用吧
這篇文章主要介紹了用HTML+CSS+JS做出簡單的TODOLIST（記事本）項目,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友可以參考下
1、簡單介紹
在學(xué)習(xí)完HTML、CSS和一些JS后，博主也利用一些空余的時間的寫了一個關(guān)于JS簡單應(yīng)用的Demo，主要實現(xiàn)的是一個Todolist（類似于記事本）的應(yīng)用，可以實現(xiàn)數(shù)據(jù)的增、刪、改、查，并且使用localStorage實現(xiàn)數(shù)據(jù)的本地持久化存儲，具體就接著往下看吧。
2、運行截圖
往輸入框里輸入內(nèi)容：
進(jìn)行添加后默認(rèn)添加到未完成一欄：
將剛剛添加的事項進(jìn)行修改：
修改成功：
將修改成功后的事項設(shè)置成已完成：
對“干飯”、“睡覺”進(jìn)行刪除：
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>
主要是分成兩個部分，一個是頭部輸入框的部分，還有一個就是內(nèi)容顯示部分，todocount和donecount表示未完成事項和已完成事項的數(shù)目，list則是顯示具體的事項，這邊默認(rèn)是沒有的，在js進(jìn)行事項的添加并顯示。
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); //頁面加載完調(diào)用load函數(shù)，即頁面的初始化
document.getElementById("todo").onkeypress = function (event) {
if (event.keyCode === 13) {/*13表示按下回車*/
add(event);
}
};
var todolist;//定義全局變量
function load() { //加載所有事項的函數(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) {//不為空時
todolist = JSON.parse(list); //JSON對象轉(zhuǎn)換為JS對象
} else {
todolist = [];//置空
}
if (todolist != null) {
for (var i = 0; i < todolist.length; i++) {//遍歷已轉(zhuǎn)化成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 + ")>確認(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為空時
todo.innerHTML = "";
done.innerHTML = "";
todonum.innerHTML = 0;
donenum.innerHTML = 0;
}
}
function add(e) { //添加事項的函數(shù)
var newtodo = {
todo: "", //用戶輸入的內(nèi)容
done: false //done表示是否完成該事項
};
var temp = document.getElementById("todo").value; //使用temp存儲id為todo標(biāo)簽的value值
if (temp.length == 0 && temp.trim() == "") { //當(dāng)輸入為空時
alert('輸入事項不能為空');
return;
}
var flag = confirm('您確定要添加該事項嗎?');//彈出確認(rèn)框
if(flag){//選擇是
newtodo.todo = temp; //將temp值賦給newtodo對象的todo屬性
todolist.push(newtodo); //往todolist中添加對象
document.getElementById("todo").value = ""; //對輸入框進(jìn)行初始化
save(); //保存
alert('添加成功');
}else{
alert('操作出錯');
return ;
}
}
function changedone(i){ //將未完成的事項改變成已完成
var flag = confirm('您確定要完成該事項嗎?');
if(flag){
todolist[i].done = true; //改變done的狀態(tài)
save();
alert('修改成功');
}else{
alert('操作出錯');
return ;
}
}
function changetodo(i){ //將已完成的事項改變成未完成
var flag = confirm('您確定要取消完成該事項嗎?');
if(flag){
todolist[i].done = false;//改變done的狀態(tài)
save();
alert('修改成功');
}else{
alert('操作出錯');
return ;
}
}
function edit(i) { //修改事項的內(nèi)容
var temp = prompt("請輸入你想要修改的內(nèi)容",todolist[i].todo);
if(temp != null && temp.trim() != ""){//當(dāng)修改后內(nèi)容不為空時
todolist[i].todo = temp; //修改內(nèi)容
alert('修改成功');
save();
}else{
alert('輸入字符串為空,修改失敗');
}
}
function del(i) { //刪除相應(yīng)的事項
var flag = confirm('您確定要刪除該事項嗎?');
if(flag){
todolist.splice(i, 1); //刪除掉指定的一個元素
save();
alert('刪除成功');
}else{
alert('操作出錯');
return ;
}
}
function save(){ //保存事項的函數(shù)
localStorage.setItem("todolist", JSON.stringify(todolist)); //將JS對象轉(zhuǎn)化成JSON對象并保存到本地
load(); //每次保存完都刷新頁面
}
這次demo的主要使用就是js部分，因此這邊代碼中的注釋也比較全面了，主要就是增刪改查的幾個函數(shù)，以及一些初始化的注意事項，還有持久化數(shù)據(jù)的使用，需要注意的是每一個進(jìn)行修改或者添加后都要進(jìn)行一次保存并重新加載內(nèi)容，不然會導(dǎo)致內(nèi)容沒辦法及時地更新。還有就是這邊如果直接復(fù)制代碼的話，可能會因為設(shè)備的不同導(dǎo)致樣式上的一些區(qū)別，這邊博主沒有做跨設(shè)備的處理。
4、總結(jié)
這次的Demo讓我把之前學(xué)過的大部分知識都進(jìn)行了一次的應(yīng)用，并且在實踐的過程中也將一些已經(jīng)忘記的知識點進(jìn)行了復(fù)習(xí)，這次的Demo雖然做的不是特別地完善，過程中也有遇到查資料的情況，但是總體上還是收獲了很多，這邊也建議很多剛開始學(xué)習(xí)前端的小白，在學(xué)完一階段后，就要及時地做一些Demo，畢竟編程更重要的還是實踐啦。
到此這篇關(guān)于用HTML+CSS+JS做出簡單的TODOLIST（記事本）的文章就介紹到這了,更多相關(guān)todolist操作實例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了response body加密如何破解的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序 上傳頭像的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
這篇文章主要為大家介紹了TypeScript 的條件類型使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Javascript常用數(shù)組是構(gòu)成其的一個重要的部分，它們可以用來存儲字符串、對象、函數(shù)、因此本篇文章小編九帶大家深入了解Javascript常用數(shù)組的操作方法,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
這篇文章主要介紹了學(xué)習(xí)筆記vue的第一個程序，其中非常詳細(xì)的為大家講解了vue程序的創(chuàng)建步驟，有需要的朋友可以學(xué)習(xí)下，希望可以有所幫助2021-08-08
JavaScript實現(xiàn)棧結(jié)構(gòu)詳細(xì)過程
這篇文章主要介紹了JavaScript實現(xiàn)棧結(jié)構(gòu)詳細(xì)過程，棧即stack它是一種受限的線性表，后進(jìn)先出LIFO，更多具體的內(nèi)容，需要的小伙伴參考下面文章的詳細(xì)內(nèi)容2021-12-12
這篇文章主要為大家介紹了js基本類型與引用類型的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家介紹了ECharts的三維可視化及在微信小程序中使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
TypeScript對象解構(gòu)操作符在Spartacus實際項目開發(fā)中的應(yīng)用解析
這篇文章主要為大家介紹了TypeScript對象解構(gòu)操作符在Spartacus實際項目開發(fā)中的應(yīng)用解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
preload 顧名思義就是一種預(yù)加載的方式，它通過聲明向瀏覽器聲明一個需要提交加載的資源，當(dāng)資源真正被使用的時候立即執(zhí)行，就無需等待網(wǎng)絡(luò)的消耗2020-02-02