首页>前端>正文

1分钟快速制作漂亮的H5本地记事本

时间:2017-12-27 14:29:03   来源:百战程序员   阅读:
大家好,以前给大家分享过一个五步骤制作精美的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相关技术文章。

 


 
















分享:0

电话咨询

客服热线服务时间

周一至周五 9:00-21:00

周六至周日 9:00-18:00

咨询电话

0755-23061965

18898413781

微信扫一扫