`;addBox.insertAdjacentHTML('afterend',liEl);});}showNotes();functiondeleteNote(noteId){letconfirmDelete=confirm("你确定要删除这条笔记吗？");如果（！确认删除）返回；notes.splice(noteId,1);localStorage.setItem('notes',JSON.stringify(notes));showNotes();}functionupdateNote(noteId,title,desc){isUpdate=true;updateId=noteId;addBox.click();titleEl.value=title;descEl.value=desc;addBtn.innerText='编辑笔记';popupTitle.innerText='编辑笔记';}addBox.addEventListener('click',()=>{titleEl.focus();popupBox.classList.add('show')});closeIcon.addEventListener('click',()=>{isUpdate=false;titleEl.value='';descEl.value='';addBtn.innerText='添加注释';popupTitle.innerText='添加新注释';popupBox.classList.remove('show');});addBtn.addEventListener('click',(e)=>{e.preventDefault();letnoteTitle=titleEl.value,noteDesc=descEl.value;if(noteTitle||noteDesc){letdateEl=newDate(),month=months[dateEl.getMonth()],day=dateEl.getDate(),year=dateEl.getFullYear();让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();显示注释（）；}});CSS的示例代码：:root{--primaryColor:#0e153a;--secondarycolor:#e2f3f5;--primaryText:#3d5af1;}*{保证金:0;填充：0；框大小：边框框；font-family:'LucidaSans','LucidaSansRegular','LucidaGrande','LucidaSansUnicode',Geneva,Verdana,sans-serif;}body{背景：var(--primaryColor);}.wrapper{边距：50px；显示：网格；间隙：15px；grid-template-columns:repeat(auto-fill,265px);}.wrapperli{height:250px;列表样式：无；背景：var(--secondarycolor);边界半径：5px；padding:15px20px20px;}.add-box,.icon,.bottom-content,.popup,header{display:flex;对齐项目：居中；证明内容：空格之间；}.add-box{flex-direction：column；证明内容：c进入;cursor:pointer;}.add-box.icon{height:88px;宽度：88px；字体大小：60px；证明内容：居中；颜色：var(--primaryColor);}.add-boxp{颜色：var(--primaryText);字体粗细：500；margin-top:20px;}.wrapper.note{display:flex;弹性方向：列；调整内容：空格；}.notep{font-size:22px;字体粗细：500；颜色：var(--primaryColor);}.notespan{显示：块；顶部边距：5px；颜色：var(--primaryText);font-size:16px;}.bottom-contentspan{color:var(--primaryText);font-size:14px;}.bottom-content.settingsi{color:var(--primaryText);字体大小：15px；光标：指针！重要；填充：010px;}.popup-box{位置：固定；顶部：0；左：0；高度：100%；z-指数：2；宽度：100%；背景：rgba(0,0,0,0.4);}.popup-box.popup{position:absolute;顶部：50%；左：50%；z-指数：3；最大宽度：400px;宽度：100%；证明内容：居中；transform:translate(-50%,-50%);}.popup-box,.popup-box.popup{opacity:0;指针事件：无；过渡：所有0.25秒缓和；z-index:-1;}.popup-box.show,.popup-box.popup{opacity:1;指针事件：自动；z-index:3;}.popup.content{width:calc(100%-15px);边界半径：5px；背景：#fff;}.popup.contentheader{填充：15px25px;border-bottom:1pxsolid#ccc;}.contentheaderp{font-size:20px;font-weight:500;}.contentheaderi{color:#575757;游标：指针；font-size:20px;}.contentform{margin:15px25px35px;}.contentform.row{margin-bottom:20px;}form.rowlabel{display:block;字体大小：18px；margin-bottom:6px;}.contentform:where(input,textarea){width:100%;高度：50px；大纲：无；字体大小：17px；填充：015px；边界半径：4px；border:1pxsolid#999;}.content表单textarea{高度：150px;填充：8px15px；调整大小：无；}.内容表单按钮{宽度：100%；高度：50px；边框：无；大纲：无；边界半径：5px；-尺寸：17px；background:var(--primaryColor);}这是实现HTML和CSS后的样子：接下来我们看JavaScript的示例代码：constaddBox=document.querySelector('.add-box'),popupBox=document.querySelector('.popup-box'),popupTitle=popupBox.querySelector('headerp'),closeIcon=document.querySelector('headeri'),titleEl=document.querySelector('input'),descEl=document.querySelector('textarea'),addBtn=document.querySelector('button');constmnotallow=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']constnotes=JSON.parse(localStorage.getItem('notes')||'[]');letisUpdate=false,updateId;functionshowNotes(){document.querySelectorAll('.note').forEach(note(note,index)=>{让liEl=`

${note.title}

${note.description}