• 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相关技术文章。

     

    本文为上海尚学堂前端原创,转载请注明原文出处。
  • 相关阅读:
    Table交替行变色 鼠标经过变色 单击变色
    编程专用字体(雅黑字体+Consolas)
    Enterprise Architect学习笔记-EA中关系
    通用分页存储过程
    解决vs2008无法切换设计视图
    盒子模式
    ASP.NET界面数据绑定大大杂烩
    Tyvj P1032 Begin2 Unit1 身份验证
    NOIP2010普及组T1
    TyvjBegin P1036 Begin2 Unit1 数独验证
  • 原文地址:https://www.cnblogs.com/shsxt/p/8176496.html
Copyright © 2020-2023  润新知