1、簡單介紹
在學習完html、css和一些js后，博主也利用一些空余的時間的寫了一個關于js簡單應用的demo，主要實現的是一個todolist（類似于記事本）的應用，可以實現數據的增、刪、改、查，并且使用localstorage實現數據的本地持久化存儲，具體就接著往下看吧。
2、運行截圖
往輸入框里輸入內容：
進行添加后默認添加到未完成一欄：
將剛剛添加的事項進行修改：
修改成功：
將修改成功后的事項設置成已完成：
對“干飯”、“睡覺”進行刪除：
3、代碼介紹
話不多說，先貼上代碼：
html部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!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部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
* { 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部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
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操作實例內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_43866830/article/details/115583686
