zoukankan      html  css  js  c++  java
  • 1分钟快速制作漂亮的H5本地记事本

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


    主要实现的功能有:

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

    1.初始化数据


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

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

    2.封装显示数据的方法


     
    function show(notes){  
        var temp = $('#temp').html();  
        var tempStr= '';  
        //如果不是数组,变成数组  
        if(!Array.isArray(notes)){  
            notes = [notes];  
        }  
        for(var i=notes.length-1;i>-1;i--){  
            var note = notes[i];  
            tempStr += temp.replace('@title',note.title)  
                    .replace('@date',note.date)  
                    .replace('@type',note.type)  
                    .replace('@cont',note.cont);  
        }  
        $('#noteList').html(tempStr);  
    }  
    

      



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

    3.从本地存储中读取离线数据

    //读取所有数据  
    function showList(){  
        var notes = localStorage.getItem('notes');  
        if(!notes){  
            show(init);  
        }else{  
            notes = JSON.parse(notes);  
            show(notes);  
        }  
        //第一个展开  
    $('#noteList .item:first').find('.title').trigger('click');  
    }  
    

      

    4、查询数据

    $('#search').click(function(){  
        var title = $('#title1').val();  
        var type = $('#type1').val();  
        var notes = localStorage.getItem('notes');  
        if(!notes){  
            alert('没有本地笔记数据!');  
            return;  
        }else{  
            notes = JSON.parse(notes);  
        }  
        var note = [];  
        for(var i=0;i<notes.length;i++){  
            //notes[i] json对象  
            var flag = false;  
            if(!title){  
                flag = notes[i].type==type;  
            }else if(!type){  
                flag = notes[i].title.indexOf(title)>-1;  
            }else{  
                flag = notes[i].title.indexOf(title)>-1 && notes[i].type==type;  
            }  
            if(flag){  
                note.push(notes[i]);  
            }  
        }  
        if(note.length == 0){  
            alert('抱歉~没有对应的笔记!');  
        }else{  
            show(note);  
        }  
    });  
    

      

    5、使用事件委托来定义折叠展开操作

    $('body').on('click','#noteList .title', function(){
        $(this).next().slideToggle();
    });
    

      

    6、初始化显示数据

    showList();
     

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

     

    本文为上海尚学堂前端原创,转载请注明原文出处。
  • 相关阅读:
    UOJ #455 [UER #8]雪灾与外卖 (贪心、模拟费用流)
    Codeforces 482E ELCA (LCT)
    Codeforces 798D Mike and distribution (构造)
    AtCoder AGC017C Snuke and Spells
    HDU 6089 Rikka with Terrorist (线段树)
    HDU 6136 Death Podracing (堆)
    AtCoder AGC032D Rotation Sort (DP)
    jenkins+python+kubectl实现批量更新k8s镜像
    Linux 下载最新kubectl版本的命令:
    jenkins X 和k8s CI/CD
  • 原文地址:https://www.cnblogs.com/shsxt/p/8176496.html
Copyright © 2011-2022 走看看