本文主要包含HTML5教程,HTML5中国,使用HTML5 Notication API实现一个定时提醒工具,html5cn,htm等相关知识,匿名希望在学习及工作中可以帮助到您
在本文中将利用封装过的API实现一个定时提醒工具。
工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。
主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知框提醒用户时间到。
其他包括：用户能够设置对话框的持续时间，比如持续15秒，15秒后对话框消失，以及提醒内容等。
HTML&CSS
首先先创建基本的HTML结构如下：
时间提醒
复制代码
desktopNotify.js是前面提到的封装过的Notification API， desktop-notification.js则是相关的业务逻辑JS，后面会说到。基本的效果如下，虽然是丑陋了点- -！！
程序的逻辑比较简单，设置各个字段，点击"开始"按钮，程序开始计时，到指定时间，弹出通知框。
JavaScrip
desktopNotify.js的功能主要是对原生Notification API做一些基本封装，代码如下：
void function() {
var _instance = null,
_permissionStatus = -1,
_eventTable = {
"show": 1,
"error": 1,
"close": 1,
"click": 1
};
/**
*调用例子：
* var DN = window.XX.DesktopNotify;
* DN.requestPermission(function(){
* DN.show("http://xxx", "hello", "world");
* });
*/
var DesktopNotify = {
/**
*检测是否支持Notification，支持返回true
*/
isSupport : function() {
return 'Notification' in window || 'webkitNotifications' in window;
},
/**
*弹出一个文本桌面通知
*
* @param {String} iconURL:图标资源
* @param {String} title: 标题
* @param {String} content: 内容
*/
show : function(iconURL, title, content) {
_instance = this.create(iconURL, title, content);
_instance.show();
},
/**
*弹出一个 HTML桌面通知
*
* @param {String} url:html链接资源
*/
showHTML : function(url) {
_instance = this.createHTML(url);
_instance.show();
},
/***
* 关闭一个桌面通知
*
* @param {Object} cb： 隐藏后的回调函数
*
*/
hide : function(cb) {
_instance && _instance.close();
cb && cb();
},
/**
* 释放通知对话框引用
*/
destroy: function() {
工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。
主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知框提醒用户时间到。
其他包括：用户能够设置对话框的持续时间，比如持续15秒，15秒后对话框消失，以及提醒内容等。
HTML&CSS
首先先创建基本的HTML结构如下：
desktopNotify.js是前面提到的封装过的Notification API， desktop-notification.js则是相关的业务逻辑JS，后面会说到。基本的效果如下，虽然是丑陋了点- -！！
程序的逻辑比较简单，设置各个字段，点击"开始"按钮，程序开始计时，到指定时间，弹出通知框。
JavaScrip
desktopNotify.js的功能主要是对原生Notification API做一些基本封装，代码如下：