查看: 2300|回复: 0

[HTML代码] 1分钟快速制作漂亮的H5本地记事本

发表于 2018-1-2 08:00:00

大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾《五步教你制作漂亮精致的HTML时钟》,还有《一分钟教你如何实现唯美的文字描边》;今天给大家分享一个用H5 + localStorage开发的一个本地记事本应用,下面先看一下他精美的帅样子吧。


主要实现的功能有:
  • 填写标题验证功能,标题不能为空
  • 可以选择分类:默认/生活/美食/代码
  • 添加成功后,立即显示
  • 可以搜索标题和分类
  • 笔记可以点击标题展开折叠
  • 多条数据第一条展开显示,其余折叠显示
1.初始化数据


var init = {title:'这是标题',
date:new Date().toLocaleString(),
type:'示例',
cont:'这是一个笔记应用,不需要联网,也不需要数据库,可以直接把数据储存在本地.方便易用!^_^'};

当用户第一次打开应用时,给用户的提示信息。

2.封装显示数据的方法
  1. function show(notes){
  2. var temp = $('#temp').html();
  3. var tempStr= '';
  4. //如果不是数组,变成数组
  5. if(!Array.isArray(notes)){
  6. notes = [notes];
  7. }
  8. for(var i=notes.length-1;i>-1;i--){
  9. var note = notes[i];
  10. tempStr += temp.replace('@title',note.title)
  11. .replace('@date',note.date)
  12. .replace('@type',note.type)
  13. .replace('@cont',note.cont);
  14. }
  15. $('#noteList').html(tempStr);
  16. }
复制代码

  



外部传入要显示的数据,内部进行数据的拼接和渲染。

3.从本地存储中读取离线数据
  1. //读取所有数据
  2. function showList(){
  3. var notes = localStorage.getItem('notes');
  4. if(!notes){
  5. show(init);
  6. }else{
  7. notes = JSON.parse(notes);
  8. show(notes);
  9. }
  10. //第一个展开
  11. $('#noteList .item:first').find('.title').trigger('click');
  12. }
复制代码

  

4、查询数据
  1. $('#search').click(function(){
  2. var title = $('#title1').val();
  3. var type = $('#type1').val();
  4. var notes = localStorage.getItem('notes');
  5. if(!notes){
  6. alert('没有本地笔记数据!');
  7. return;
  8. }else{
  9. notes = JSON.parse(notes);
  10. }
  11. var note = [];
  12. for(var i=0;i<notes.length;i++){
  13. //notes[i] json对象
  14. var flag = false;
  15. if(!title){
  16. flag = notes[i].type==type;
  17. }else if(!type){
  18. flag = notes[i].title.indexOf(title)>-1;
  19. }else{
  20. flag = notes[i].title.indexOf(title)>-1 && notes[i].type==type;
  21. }
  22. if(flag){
  23. note.push(notes[i]);
  24. }
  25. }
  26. if(note.length == 0){
  27. alert('抱歉~没有对应的笔记!');
  28. }else{
  29. show(note);
  30. }
  31. });
复制代码

  

5、使用事件委托来定义折叠展开操作
  1. $('body').on('click','#noteList .title', function(){
  2. $(this).next().slideToggle();
  3. });
复制代码

  

6、初始化显示数据

showList();

好了,一个精美的HTML5本地记事本就诞生了,会做了吗?欢迎关注上海尚学堂html5相关技术文章。

本文为上海尚学堂前端原创,转载请注明原文出处。


回复

使用道具 举报