首页>国内 > 正文

用 JavaScript 实现一个简单的笔记应用程序

2022-10-21 15:45:58来源：web前端开发

本文将提供有关如何使用 HTML5、CSS3 和 JavaScript 构建笔记应用程序的信息。


(资料图)

本文适用于熟悉 HTML5、CSS3 和 JavaScript 基础知识的人。本文不包括对 HTML5、CSS3 和 JavaScript 的详细阐述，但会提供实现源代码。

现在，让我们开始吧

首先，我们需要用 HTML5 和 CSS3 创建一个UI界面。

接着，我们需要从iconscout 网站上引入获取图标。

iconscout网站地址：https://iconscout.com/unicons/explore/line

HTML 的示例代码：

const addBox = document.querySelector(".add-box"),popupBox = document.querySelector(".popup-box"),popupTitle = popupBox.querySelector("header p"),closeIcon = document.querySelector("header i"),titleEl = document.querySelector("input"),descEl = document.querySelector("textarea"),addBtn = document.querySelector("button ");const months= ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]const notes = JSON.parse(localStorage.getItem("notes") || "[]");let isUpdate = false, updateId;function showNotes() {    document.querySelectorAll(".note").forEach(note(note, index)=>{        let liEl=`
  •                         
                                
    ${note.title}
                                ${note.description}                        
                            
                                ${note.date}                            
                                                                                                
                            
                        
    • `;        addBox.insertAdjacentHTML("afterend", liEl);    });}showNotes();function deleteNote(noteId) {    let confirmDelete= confirm("Are you sure you want to delete this note?");    if(!confirmDelete) return;    notes.splice(noteId, 1);    localStorage.setItem("notes", JSON.stringify(notes));    showNotes();}function updateNote(noteId, title, desc) {    isUpdate = true;    updateId = noteId;    addBox.click();    titleEl.value = title;    descEl.value = desc;    addBtn.innerText = "Edit Note";    popupTitle.innerText = "Editing a Note";}addBox.addEventListener("click", ()=>{    titleEl.focus();    popupBox.classList.add("show")});closeIcon.addEventListener("click", ()=>{    isUpdate = false;    titleEl.value = "";    descEl.value = "";    addBtn.innerText = "Add Note";    popupTitle.innerText = "Add a new Note";    popupBox.classList.remove("show");});addBtn.addEventListener("click", (e)=>{    e.preventDefault();    let noteTitle = titleEl.value,    noteDesc = descEl.value;    if (noteTitle || noteDesc) {        let dateEl= new Date(),        month = months[dateEl.getMonth()],        day = dateEl.getDate(),        year = dateEl.getFullYear();        let noteInfo = {            title: noteTitle,            description: noteDesc,            date: `${month} ${day} ${year}`        }        if (!isUpdate) {            notes.push(noteInfo);        }else{            isUpdate = false;            notes[updateId] = noteInfo;        }        localStorage.setItem("notes", JSON.stringify(notes));        closeIcon.click();        showNotes();    }});

    CSS 的示例代码：

    :root{    --primaryColor:#0e153a;    --secondarycolor: #e2f3f5;    --primaryText: #3d5af1;}*{    margin: 0;    padding: 0;    box-sizing: border-box;    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;}body{    background: var(--primaryColor);}.wrapper{    margin: 50px;    display: grid;    gap: 15px;    grid-template-columns: repeat(auto-fill, 265px);}.wrapper li{    height: 250px;    list-style: none;    background: var(--secondarycolor);    border-radius: 5px;    padding: 15px 20px 20px;}.add-box, .icon, .bottom-content, .popup, header{    display: flex;    align-items: center;    justify-content: space-between;}.add-box{    flex-direction: column;    justify-content: center;    cursor: pointer;}.add-box .icon{    height: 88px;    width: 88px;    font-size: 60px;    justify-content: center;    color: var(--primaryColor);}.add-box p{    color: var(--primaryText);    font-weight: 500;    margin-top: 20px;}.wrapper .note{    display: flex;    flex-direction: column;    justify-content: space-between;}.note p{    font-size: 22px;    font-weight: 500;    color: var(--primaryColor);}.note span{    display: block;    margin-top: 5px;    color: var(--primaryText);    font-size: 16px;}.bottom-content span{    color: var(--primaryText);    font-size: 14px;}.bottom-content .settings i{    color: var(--primaryText);    font-size: 15px;    cursor: pointer !important;    padding: 0 10px;}.popup-box{    position: fixed;    top: 0;    left: 0;    height: 100%;    z-index: 2;    width: 100%;    background: rgba(0, 0, 0, 0.4);}.popup-box .popup{    position: absolute;    top: 50%;    left: 50%;    z-index: 3;    max-width: 400px;    width: 100%;    justify-content: center;    transform: translate(-50%, -50%);}.popup-box, .popup-box .popup{    opacity: 0;    pointer-events: none;    transition: all 0.25s ease;    z-index: -1;}.popup-box.show, .popup-box .popup{    opacity: 1;    pointer-events: auto;    z-index: 3;}.popup .content{    width: calc(100% - 15px);    border-radius: 5px;    background: #fff;}.popup .content header{    padding: 15px 25px;    border-bottom: 1px solid #ccc;}.content header p{    font-size: 20px;    font-weight: 500;}.content header i{    color: #575757;    cursor: pointer;    font-size: 20px;}.content form{    margin: 15px 25px 35px;}.content form .row{    margin-bottom: 20px;}form .row label{    display: block;    font-size: 18px;    margin-bottom: 6px;}.content form :where(input, textarea) {    width: 100%;    height: 50px;    outline: none;    font-size: 17px;    padding: 0 15px;    border-radius: 4px;    border: 1px solid #999;}.content form textarea{    height: 150px;    padding: 8px 15px;    resize: none;}.content form button{    width: 100%;    height: 50px;    border: none;    outline: none;    border-radius: 5px;    color: #fff;    font-size: 17px;    background: var(--primaryColor);}

    这是实现 HTML和 CSS 后的样子：

    接着，我们再来看一下JavaScript 的示例代码：

    const addBox = document.querySelector(".add-box"),popupBox = document.querySelector(".popup-box"),popupTitle = popupBox.querySelector("header p"),closeIcon = document.querySelector("header i"),titleEl = document.querySelector("input"),descEl = document.querySelector("textarea"),addBtn = document.querySelector("button ");const mnotallow= ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]const notes = JSON.parse(localStorage.getItem("notes") || "[]");let isUpdate = false, updateId;function showNotes() {    document.querySelectorAll(".note").forEach(note(note, index)=>{        let liEl=`
  •                         
                                
    ${note.title}
                                ${note.description}                        
                            
                                ${note.date}                            
                                                                                                
                            
                        
    • `;        addBox.insertAdjacentHTML("afterend", liEl);    });}showNotes();function deleteNote(noteId) {    let cnotallow= confirm("Are you sure you want to delete this note?");    if(!confirmDelete) return;    notes.splice(noteId, 1);    localStorage.setItem("notes", JSON.stringify(notes));    showNotes();}function updateNote(noteId, title, desc) {    isUpdate = true;    updateId = noteId;    addBox.click();    titleEl.value = title;    descEl.value = desc;    addBtn.innerText = "Edit Note";    popupTitle.innerText = "Editing a Note";}addBox.addEventListener("click", ()=>{    titleEl.focus();    popupBox.classList.add("show")});closeIcon.addEventListener("click", ()=>{    isUpdate = false;    titleEl.value = "";    descEl.value = "";    addBtn.innerText = "Add Note";    popupTitle.innerText = "Add a new Note";    popupBox.classList.remove("show");});addBtn.addEventListener("click", (e)=>{    e.preventDefault();    let noteTitle = titleEl.value,    noteDesc = descEl.value;    if (noteTitle || noteDesc) {        let dateEl= new Date(),        month = months[dateEl.getMonth()],        day = dateEl.getDate(),        year = dateEl.getFullYear();        let noteInfo = {            title: noteTitle,            description: noteDesc,            date: `${month} ${day} ${year}`        }        if (!isUpdate) {            notes.push(noteInfo);        }else{            isUpdate = false;            notes[updateId] = noteInfo;        }        localStorage.setItem("notes", JSON.stringify(notes));        closeIcon.click();        showNotes();    }});

    最后，这是添加 JavaScript 后的样子：

    注意：您可以通过单击添加注释图标添加新注释，通过单击编辑图标编辑注释并通过单击垃圾桶图标删除注释。

    例如，添加新笔记：

    编辑笔记：

    所有笔记都将存储在 Web 浏览器的本地存储中，因此刷新页面后仍会显示笔记。

    到这里，这个实现案例就完成了，恭喜，你做到了！你已经会构建一个笔记应用程序。

    关键词： 应用程序 我们再来看 刷新页面 基础知识 我们需要

    相关新闻

    聚焦

    IT

    科技

    Copyright 2015-2020   三好网  版权所有