jquery+bootstrap 实现简单备忘录（三）

写在前面的话

    在这篇文章中，我会详细介绍这个项目的灵魂所在：备忘闹钟铃声提醒功能的实现

非常感谢你能看到这篇文章，也希望你能继续看下去……

time_watch

    程序一旦开始运行，初始化dom结构后，便会运行time_watch（时间监听函数）

//时间监听
function time_watch(){
    var nowtime;
    time_check();
    watcher = setInterval(function(){
        nowtime = new Date().getTime();
        if(nowtime > timeobj.neartime){//到达预定时间
            time_get();
        }
    },1000);
}

time_check

    在运行time_watch函数时，便会执行它内部的time_check(时间检查函数)。
    time_check的作用是从所有的未完成的备忘中，选取一个离现在最近的备忘

//时间检查 获取离现在最近的一个任务
function time_check(){
    var key,object,state;
    timeobj.neartime = new Date("2020-01-01").getTime();
    for(var i=0;i<localStorage.length;i++){
        key = localStorage.key(i);
        /*JSON.parse将string转换为json*/
        object = JSON.parse(localStorage.getItem(key));
        state = object.state;
        if(state){//未完成
            var stime = new Date(object.time).getTime();//获取预定时间
            if(stime < timeobj.neartime){//如果有更近的时间
                timeobj.neartime = stime;
                timeobj.nearflag = i;
                timeobj.obj = object;
            }
        }
    }
}
//时间达到预定后处理

    执行完time_check函数后，获得了离现在最近的一个备忘后，程序又继续执行time_watch函数，此时开启了一个时间监听器watcher = setInterval()。time_watch每隔一秒便判断是否达到备忘提醒时间。
    如果达到了，便执行time_get函数

time_get

达到提醒时间后，执行time_get函数（时间达到后处理函数）

//时间达到预定后处理
function time_get(){
    alert.play();//闹钟提醒
    idFlag = timeobj.nearflag;
    thing_change();
    time_remain();
    init();
    time_reset();//开启下一次事件的监听
}

    首先播放闹钟铃声，并且改变备忘状态（由未完成改为已完成）。然后在页面上进行显示提醒（time_remain函数）

time_remain

//显示提醒面板
function time_remain(){
    var str='<li>'+
                '<div class="alert alert-warning alert-dismissible fade in" role="alert">'+
                    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
                        '<span aria-hidden="true">知道了</span>'+
                    '</button>'+
                    '<strong>注意!</strong>'+ 
                    '<span style="margin-left:10px">'+timeobj.obj.content+'</sp an>'+
                '</div>'
            '</li>';
    $('#rList').append(str);
}

提醒完成后，又调用time_reset函数（重置time_watch）

time_reset

//重新监听时间
function time_reset(){
    clearInterval(watcher);//事件树已经变化，需要重新监听
    time_watch();
}

    接下来的事，又重新交还给了time_watch。它会再调用time_check函数。重新获得一个离现在最近的备忘。
    然后每秒一次的去监听提醒时间，这形成了一次次的循环。
    到这里，我这个项目的灵魂所在，闹钟功能的实现已经说完了。但是有两个点我需要提醒一下:
    你应该发现了我的数据操作函数里都执行了init函数，为什么？因为数据操作后dom树结构已经变化，需要重新初始化dom树结构。
    我的操作函数里都执行了time_reset函数，为什么？同样的道理。因为数据操作后dom树结构已经变化，也需要重新监听提醒时间。

程序地址

http://download.csdn.net/download/nate__river/9989453