## 提醒功能
**引入datetimepicker插件**
~~~html
<link rel="stylesheet" href="css/jquery.datetimepicker.css" />
<script type="text/javascript" src="js/jquery.datetimepicker.full.min.js" ></script>
~~~
~~~javascript
function render_task_detail(index){
if(index==undefined || !task_list[index]) return;
var item = task_list[index];
var tpl =
'<form>'+
'<div class="content">'+
item.content+
'</div>'+
'<div class="input-item"><input style="display:none;" type="text" name="content" value="'+item.content+'"></div>'+
'<div>'+
'<div class="desc input-item">'+
'<textarea name="desc" rows="" cols="">'+item.desc+'</textarea>'+
'</div>'+
'</div>'+
'<div class="remind input-item">'+
'<label>提醒時間</label>'+
'<input class="datetime" name="remind_date" type="text" value="'+(item.remind_date || '')+'"/>'+
'</div>'+
'<div><button class="input-item" type="submit">更新</button></div>'+
'</form>';
$task_detail.html('');
$task_detail.html(tpl);
$('.datetime').datetimepicker();
$update_form = $task_detail.find('form');
$task_detail_content = $update_form.find('.content');
$task_detail_content_input = $update_form.find('[name=content]');
$task_detail_content.on('dblclick',function(){
$task_detail_content_input.show();
$task_detail_content.hide();
});
$update_form.on('submit',function(e){
e.preventDefault();
var data = {};
data.content = $(this).find('[name=content]').val();
data.desc = $(this).find('[name=desc]').val();
data.remind_date = $(this).find('[name=remind_date]').val();
/*如果重新修改了任務詳情，則提醒重新設置成false*/
data.informed = false;
/* 更新對象數組 task_list*/
update_task(index,data);
hide_task_detail();
});
}
~~~
**設定計時器方法不斷監聽時間變化**
~~~
function init(){
task_list = store.get('task_list')||[];
lg(task_list);
if(task_list.length){
for(var i =0;i<task_list.length;i++){
if(task_list[i]==null){
delete task_list[i];
}
}
/*將存儲的數據渲染到頁面上*/
render_task_list();
}
/* 初始化時調用提醒的計時器*/
task_remind_check();
listen_msg_event();
}
function task_remind_check(){
var current_timestamp;
var itv = setInterval(function(){
// for (var i=0;i<task_list.length;i++) {
for(key in task_list){
var item = get(key);
var task_timestamp;
if(!item||!item.remind_date||item.informed)
continue;
current_timestamp = new Date().getTime();
task_timestamp = (new Date(item.remind_date)).getTime();
if(current_timestamp-task_timestamp>=1){
update_task(key,{informed:true});
show_msg(item.content);
}
}
},300);
~~~
**提醒方式，頂部div**
~~~
// 頂部
var $msg_content = $msg.find('.msg-content');
var $msg_comfirm = $msg.find('.confirmed');
var $alerter = $('.alerter');
~~~
~~~html
<div class="msg">
<span class="msg-content"></span>
<span class="anchor confirmed">知道了</span>
</div>
~~~
~~~css
/*提醒信息*/
.msg{
display: none;
text-align: center;
background: #ffe264;
padding: 10px;
color: #333333;
}
.anchor{
cursor: pointer;
}
~~~
~~~javascript
function show_msg(msg){
$msg_content.html(msg);
$alerter.get(0).play();
$msg.show();
}
function hide_msg(){
$msg.hide();
}
function listen_msg_event(){
$msg_comfirm.on('click',function(){
hide_msg();
});
}
~~~
**添加鈴聲**
~~~html
<video class="alerter" src="alert.mp3"></video>
~~~
