大家好，我给大家分享了一篇五步制作一个漂亮的HTML5时钟的文章，点击回顾《五步教你制作漂亮精致的HTML时钟》，以及《一分钟教你如何实现唯美的文字描边》；今天给大家分享一款H5+localStorage开发的一款本地记事本应用，先来看看它帅气的外观吧。主要功能有：填写标题验证功能，标题不能为空，可以选择类别：默认/life/food/code添加成功后，会立即显示标题和类别备注，可以搜索.您可以点击标题展开和折叠多条数据。第一个展开显示，其余折叠显示1.初始化数据varinit={title:'Thisisthetitle',date:newDate().toLocaleString(),type:'example',cont:'这是一个笔记应用，不需要联网，不需要数据库，数据可以存储在本地。方便易用！^_^'};当用户第一次打开应用时，给用户提示信息。2.数据封装显示方法functionshow(notes){vartemp=$('#temp').html();vartempStr='';//如果不是数组，就变成数组if(!Array.isArray(notes)){notes=[notes];}for(vari=notes.length-1;i>-1;i--){varnote=notes[i];tempStr+=temp.replace('@title',note.title).replace('@date',note.date).replace('@type',note.type).replace('@cont',note.续）；$('#noteList').html(tempStr);}外部传入要显示的数据，内部拼接渲染数据。3.从本地存储读取离线数据//读取所有数据functionshowList(){varnotes=localStorage.getItem('notes');如果（！笔记）{显示（初始化）；}else{notes=JSON.parse(notes);显示（注释）；}//第一次展开$('#noteList.item:first').find('.title').trigger('click');} 4、查询数据$('#search').click(function(){vartitle=$('#title1').val();vartype=$('#type1').val();varnotes=localStorage.getItem('notes');if(!notes){alert('没有本地笔记数据！');return;}else{notes=JSON.parse(notes);}varnote=[];for(vari=0;i
