利用前端HTML+CSS+JS開發(fā)簡單的TODOLIST功能（記事本）
更新時間：2021年04月12日 17:17:08 作者：這名沒人用吧
這篇文章主要介紹了用HTML+CSS+JS做出簡單的TODOLIST（記事本）項目,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友可以參考下
1、簡單介紹
在學習完HTML、CSS和一些JS后，博主也利用一些空余的時間的寫了一個關于JS簡單應用的Demo，主要實現(xiàn)的是一個Todolist（類似于記事本）的應用，可以實現(xiàn)數據的增、刪、改、查，并且使用localStorage實現(xiàn)數據的本地持久化存儲，具體就接著往下看吧。
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部分這邊就不贅述啦，博主自認為做的很胯，大家有做的話可以自己進行一下優(yōu)化。
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>"; //拼接上字符串，以便后續(xù)使用
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的狀態(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) { //修改事項的內容
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部分，因此這邊代碼中的注釋也比較全面了，主要就是增刪改查的幾個函數，以及一些初始化的注意事項，還有持久化數據的使用，需要注意的是每一個進行修改或者添加后都要進行一次保存并重新加載內容，不然會導致內容沒辦法及時地更新。還有就是這邊如果直接復制代碼的話，可能會因為設備的不同導致樣式上的一些區(qū)別，這邊博主沒有做跨設備的處理。
4、總結
這次的Demo讓我把之前學過的大部分知識都進行了一次的應用，并且在實踐的過程中也將一些已經忘記的知識點進行了復習，這次的Demo雖然做的不是特別地完善，過程中也有遇到查資料的情況，但是總體上還是收獲了很多，這邊也建議很多剛開始學習前端的小白，在學完一階段后，就要及時地做一些Demo，畢竟編程更重要的還是實踐啦。
到此這篇關于用HTML+CSS+JS做出簡單的TODOLIST（記事本）的文章就介紹到這了,更多相關todolist操作實例內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了javascript實現(xiàn)超炫的向上滑行菜單實現(xiàn)方法,以一個完整實例形式分析了javascript針對頁面元素的遍歷與樣式操作相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JavaScript流程控制2021-12-12
這篇文章主要介紹了Javascript基礎知識中關于內置對象的相關知識的相關資料,需要的朋友可以參考下面小編薇大家?guī)淼木饰恼?/div> 2021-09-09
采用CSS和JS,剛好我最近有個站點要用到下拉菜單!...2006-06-06
如果文字過長,則將過長的部分變成省略號顯示...2006-06-06
這篇文章主要介紹了微信小程序 toast 詳解及實例代碼的相關資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了微信小程序 input表單與redio及下拉列表的使用實例的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
JS前端使用canvas實現(xiàn)擴展物體類和事件派發(fā)
這篇文章主要為大家介紹了JS前端使用canvas實現(xiàn)擴展物體類和事件派發(fā)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
微信小程序 視圖層（xx.xml)和邏輯層(xx.js)詳細介紹
這篇文章主要介紹了微信小程序 視圖層（xx.xml)和邏輯層(xx.js)詳細介紹的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了關于前端JavaScript中的ES6，ES6是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017語法標準，ES6新特性目前只有在一些較新版本瀏覽器得到支持，老版本瀏覽器里面運行我們需要將ES6轉換為ES52021-10-10最新評論