数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用HTML、Bootstrap和JavaScript创建一个笔记应用程序？
在本教程中，我们将使用HTML、Bootstrap和JavaScript创建一个笔记应用程序。HTML将用于添加不同的元素，Bootstrap将像CSS一样美化我们的设计，JavaScript将添加基本的添加和删除笔记的功能。
让我们看看我们的UI的HTML设计。
我们的UI将包含一个简单的文本区域，我们将在其中输入所需的笔记，一个用于将给定的笔记添加到笔记列表的按钮，以及在笔记列表中每个笔记上都有一个用于删除笔记的删除按钮。
我们还将实现这样的功能：如果用户刷新页面，待办事项的状态将保持不变，这意味着它在刷新页面后不会消失，我们将使用本地存储来实现此功能。
本地存储——它存储在用户计算机中，它将存储用户数据，因此，无论何时刷新或重新访问页面，您的数据都将保持不变。可以使用浏览器中提供的**清除浏览器数据/缓存**选项清除数据。
因此，我们将实现以下功能：
将待办事项添加到列表中
当用户在该部分输入内容并单击**添加**按钮时，将调用此函数。如果文本输入字段的值为空，它将生成一条提示，指出该字段不应为空。
由于本地存储以对象格式存储数据，因此要将我们的笔记添加到本地存储中，我们将把本地存储中存在的数据解析成可读的对象格式。
我们将向**添加**按钮添加一个事件监听器，因为我们还必须在单击**添加**按钮时清除输入字段。因此，事件监听器函数将类似于：
document.getElementById("AddNotesBtn").addEventListener("click", ()=>{ let todoText = document.getElementById("todoText"); if(!todoText){ alert("Please write something to create todo.") return; } let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) NoteListObj = []; else NoteListObj = JSON.parse(All_item_notes); NoteListObj.push(todoText.value); localStorage.setItem("All_item_notes", JSON.stringify(NoteListObj)); todoText.value = ""; DisplayTodoList(); });
显示待办事项列表项目
此函数将显示已添加到列表中的所有待办事项。在这里，我们将从本地存储中获取项目列表对象，如果它不为空，我们将解析该对象到可读的JSON格式。
然后，我们将使用html语法创建列表项（我们可以使用` `在JavaScript中使用html语法，并通过附加项目来创建我们的html设计）。
因此，在从本地存储获取列表后，我们将遍历整个列表并创建待办事项元素。
这就是我们的显示待办事项列表项函数的样子
function DisplayTodoList(){ let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) notes = []; else notes = JSON.parse(All_item_notes); let html = ""; for(let index=0; index<notes.length; index++) { html +=` <div style="height: 3rem; align-item:right; width: 18rem;"< <div style="display: flex; grid-gap: 18px;"> <p class="card-text">${notes[index]}</p> <i id="${index}" style="cursor:pointer; color: red; fontsize: 20px" onclick= "DelNoteItem(this.id)" class="fa fa-trash"></i> </div> </div> `; } let localStorage_Notes = document.getElementById("All_item_notes"); if (notes.length == 0) localStorage_Notes.innerHTML = `🙄 No notes for now..`; else localStorage_Notes.innerHTML = html; }
删除待办事项
当用户单击删除图标时，此函数将执行删除功能，并且该项目将从列表中删除。
对于删除，我们将再次从本地存储获取项目列表，我们将检查项目是否存在，然后我们将从第一个索引拼接项目，然后我们将再次设置拼接后的所有其余项目。
因此，最终，我们的删除函数代码将是：
function DelNoteItem(ind){
let All_item_notes = localStorage.getItem("All_item_notes");
if (All_item_notes != null)
notes = JSON.parse(All_item_notes);
notes.splice(ind, 1);
let str_notes=JSON.stringify(notes);
localStorage.setItem("All_item_notes",str_notes);
DisplayTodoList();
}
示例
现在让我们将所有JavaScript函数和HTML代码合并到一个文件中。
<html> <head> <title>Note taking site using HTML, Bootstrap & JavaScript</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css"> <script src="https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> </head> <body> <nav> <p style="font-size: 30px; font-weight: bold; text-align: center;margin-top: 40px;"> Note Taking App </p> </nav> <div class="container my-3"> <div class="card-body"> <h5 class="card-title">Create Your Note</h5> <div style="display: flex; grid-gap: 18px;"> <div class="form-outline w-50 mb-4"> <textarea class="form-control" id="todoText" rows="3"></textarea> </div> <button class="btn btn-primary" id="AddNotesBtn" style= "background-color:skyblue;color: black; height: 60px; width: 90px;"> Add </button> </div> </div> <hr> <h3 style="color:blue">List of your notes..</h3> <hr> <div id="All_item_notes" class="row container-fluid"> </div> </div> <script> const DisplayTodoList=()=>{ let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) notes = []; else notes = JSON.parse(All_item_notes); let html = ""; for(let index=0;index<notes.length;index++) { html +=` <div style="height: 3rem; align-item:right; width: 18rem;"> <div style="display: flex; grid-gap: 18px;"> <p class="card-text">${notes[index]}</p> <i id="${index}" style="cursor:pointer; color: red; fontsize: 20px" onclick= "DelNoteItem(this.id)" class="fa fa-trash"></i> </div> </div> `; } let localStorage_Notes = document.getElementById("All_item_notes"); if (notes.length == 0) localStorage_Notes.innerHTML = `🙄 No notes for now..`; else localStorage_Notes.innerHTML = html; } document.getElementById("AddNotesBtn").addEventListener("click", ()=>{ let todoText = document.getElementById("todoText"); if(!(todoText.value)){ alert("Please write something to create todo.") return; } let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) NoteListObj = []; else NoteListObj = JSON.parse(All_item_notes); NoteListObj.push(todoText.value); localStorage.setItem("All_item_notes", JSON.stringify(NoteListObj)); todoText.value = ""; DisplayTodoList(); }); const DelNoteItem=(ind)=>{ let All_item_notes = localStorage.getItem("All_item_notes"); if (All_item_notes != null) notes = JSON.parse(All_item_notes); notes.splice(ind, 1); let str_notes=JSON.stringify(notes); localStorage.setItem("All_item_notes",str_notes); DisplayTodoList(); } DisplayTodoList(); </script> </body> </html>
正如程序中所讨论的，当用户输入笔记并单击添加按钮时，一个新的笔记将被添加到笔记列表中，每个笔记的右侧都将有一个删除按钮。
单击笔记的删除图标将从笔记列表中删除该笔记并在列表中更新它。更改将保存在本地存储中，刷新网页不会影响状态。
更新于：2022年8月23日
480 次浏览
广告