建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用JavaScript實(shí)現(xiàn)一個(gè)簡單的筆記應(yīng)用程序
本文將提供有關(guān)如何使用 HTML5、CSS3 和 JavaScript 構(gòu)建筆記應(yīng)用程序的信息。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了肇源免費(fèi)建站歡迎大家使用！
本文適用于熟悉 HTML5、CSS3 和 JavaScript 基礎(chǔ)知識(shí)的人。本文不包括對(duì) HTML5、CSS3 和 JavaScript 的詳細(xì)闡述，但會(huì)提供實(shí)現(xiàn)源代碼。
現(xiàn)在，讓我們開始吧
首先，我們需要用 HTML5 和 CSS3 創(chuàng)建一個(gè)UI界面。
接著，我們需要從iconscout 網(wǎng)站上引入獲取圖標(biāo)。
iconscout 網(wǎng)站地址：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}
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);}這是實(shí)現(xiàn) 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}
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 后的樣子：
注意：您可以通過單擊添加注釋圖標(biāo)添加新注釋，通過單擊編輯圖標(biāo)編輯注釋并通過單擊垃圾桶圖標(biāo)刪除注釋。
例如，添加新筆記：
編輯筆記：
所有筆記都將存儲(chǔ)在 Web 瀏覽器的本地存儲(chǔ)中，因此刷新頁面后仍會(huì)顯示筆記。
到這里，這個(gè)實(shí)現(xiàn)案例就完成了，恭喜，你做到了！你已經(jīng)會(huì)構(gòu)建一個(gè)筆記應(yīng)用程序。
本文題目：用JavaScript實(shí)現(xiàn)一個(gè)簡單的筆記應(yīng)用程序
轉(zhuǎn)載源于：http://www.dlmjj.cn/article/dpcoigg.html
