欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

使用HTML5 Notication API实现一个定时提醒工具

程序员文章站 2022-05-04 09:53:04
...
在本文中将利用封装过的API实现一个定时提醒工具。

工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。

主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知框提醒用户时间到。

其他包括：用户能够设置对话框的持续时间，比如持续15秒，15秒后对话框消失，以及提醒内容等。


HTML&CSS

首先先创建基本的HTML结构如下：





  5. 时间提醒
  7. div {
  8. margin:40px 15px;
  9. }

  11. #main {
  12. margin:0 auto;
  13. width:360px;
  14. border: 2px solid green;
  15. }

  17. .operation {
  18. text-align:center;
  19. }




    • 复制代码

    desktopNotify.js是前面提到的封装过的Notification API， desktop-notification.js则是相关的业务逻辑JS，后面会说到。基本的效果如下，虽然是丑陋了点- -！！

    使用HTML5 Notication API实现一个定时提醒工具


    程序的逻辑比较简单，设置各个字段，点击"开始"按钮，程序开始计时，到指定时间，弹出通知框。

    JavaScrip

    desktopNotify.js的功能主要是对原生Notification API做一些基本封装，代码如下：

    1. //desktopNotify.js
    2. void function() {
    3. var _instance = null,
    4. _permissionStatus = -1,
    5. _eventTable = {
    6. "show": 1,
    7. "error": 1,
    8. "close": 1,
    9. "click": 1
    10. };


    13. /**
    14. *调用例子：
    15. * var DN = window.XX.DesktopNotify;
    16. * DN.requestPermission(function(){
    17. * DN.show("http://xxx", "hello", "world");
    18. * });
    19. */
    20. var DesktopNotify = {

    22. /**
    23. *检测是否支持Notification，支持返回true
    24. */
    25. isSupport : function() {
    26. return 'Notification' in window || 'webkitNotifications' in window;
    27. },

    29. /**
    30. *弹出一个文本桌面通知
    31. *
    32. * @param {String} iconURL:图标资源
    33. * @param {String} title: 标题
    34. * @param {String} content: 内容
    35. */
    36. show : function(iconURL, title, content) {
    37. _instance = this.create(iconURL, title, content);
    38. _instance.show();
    39. },


    42. /**
    43. *弹出一个 HTML桌面通知
    44. *
    45. * @param {String} url:html链接资源
    46. */
    47. showHTML : function(url) {
    48. _instance = this.createHTML(url);
    49. _instance.show();
    50. },

    52. /***
    53. * 关闭一个桌面通知
    54. *
    55. * @param {Object} cb： 隐藏后的回调函数
    56. *
    57. */
    58. hide : function(cb) {
    59. _instance && _instance.close();
    60. cb && cb();
    61. },

    63. /**
    64. * 释放通知对话框引用
    65. */
    66. destroy: function() {
    67. _instance = null,
    68. _permissionStatus = -1;
    69. },

    71. /**
    72. * 检查权限状态
    73. * @return {Number}: 0为允许，1为不允许， 2为禁止
    74. */
    75. checkPermission : function() {
    76. return _permissionStatus = webkitNotifications.checkPermission();
    77. },

    79. /**
    80. * 检查是否得到授权
    81. * @return {Boolean}： true表示得到授权
    82. */
    83. isPermitted: function() {
    84. return this.checkPermission() === 0;
    85. },


    88. /**
    89. * 请求授权
    90. * @param {Object} cb：得到授权后的回调函数
    91. */
    92. requestPermission: function(cb) {
    93. if(this.isPermitted()) {
    94. cb && cb();
    95. } else {
    96. webkitNotifications.requestPermission(cb);
    97. }
    98. },

    100. /**
    101. * 创建一个文本性质的通知对话框，但不展示
    102. * @param {Object} iconURL
    103. * @param {Object} title
    104. * @param {Object} content
    105. * @return {Object} Notification实例
    106. */
    107. create: function(iconURL, title, content) {
    108. return webkitNotifications.createNotification(iconURL, title, content);
    109. },

    111. /**
    112. * 创建一个HTML性质的通知对话框，但不展示
    113. * @param {Object} url: 指向html页面的链接
    114. * @return {Object} Notification实例
    115. */
    116. createHTML: function(url) {
    117. return webkitNotifications.createHTMLNotification(url);
    118. },

    120. /**
    121. * 添加事件监听函数
    122. * @param {Object} type: 事件类型
    123. * @param {Object} fn: 监听函数
    124. */
    125. on: function(type, fn) {
    126. _eventTable[type] && _instance && _instance.addEventListener(type, fn, false);
    127. },

    129. /**
    130. * 移除事件监听函数
    131. * @param {Object} type: 事件类型
    132. * @param {Object} fn: 监听函数
    133. */
    134. un: function(type, fn) {
    135. _eventTable[type] && _instance && _instance.removeEventListener(type, fn, false);
    136. }
    137. };

    139. window.XX || (window.XX = {});
    140. window.XX.DesktopNotify = DesktopNotify;
    141. }();
    复制代码

    desktop-notification.js则是业务代码，如下：

    1. //desktop-notification.js
    2. void function() {
    3. var TITLE = '时间到啦~~！亲！！',
    4. //图标路径
    5. ICONURL = 'icon.png';

    7. var DN = window.XX.DesktopNotify;

    9. /**
    10. * 通知函数，根据设置的时间间隔，周期的弹出通知框
    11. */
    12. function notify(content, duration) {
    13. DN.show(ICONURL, TITLE, content);
    14. setTimeout(function() {
    15. DN.hide();
    16. }, duration);
    17. }

    19. if (!DN.isSupport()) {
    20. alert('浏览器不支持桌面通知！');
    21. return;
    22. }

    24. var startEl = document.getElementById('start'),//开始按钮
    25. stopEl = document.getElementById('stop'),//停止按钮
    26. intervalEl = document.getElementById('interval'),//提醒时间间隔输入框
    27. contentEl = document.getElementById('content'),//提醒内容输入框
    28. durEl = document.getElementById('duration'),//通知框持续时间输入框
    29. timer = null;

    31. startEl.addEventListener('click', function(evt) {
    32. /**
    33. * 点击“开始”，先申请用户授权，经过授权后，获取相关的提醒时间间隔，以及内容，周期的调用notify函数弹出通知框
    34. */
    35. DN.requestPermission(function() {
    36. timer = setInterval(notify, intervalEl.value * 60 * 1000, contentEl.value, durEl.value * 60 * 1000);
    37. startEl.disabled = true;
    38. });
    39. }, false);

    41. stopEl.addEventListener('click', function(evt) {
    42. /**
    43. * 点击“停止”，清除周期调用
    44. */
    45. clearInterval(timer);
    46. startEl.disabled = false;
    47. }, false);
    48. }();
    复制代码

    运行效果

    注意，网页必须在HTTP或HTTPS协议下打开，而不能直接用File协议打开，否则无法运行（若用户设置了浏览器接收任何通知，倒是可以直接打开运行）。运行的效果如下：

    使用HTML5 Notication API实现一个定时提醒工具


    即便当浏览器最小化，或者未在高亮状态，通知框一样会定时弹出。

    总结

    在本文中，利用了HTML5 Notification做了一个简单的小工具，用于提醒自己不要久坐，按时休息= =！虽然界面是丑陋了点，不过效果还可以。


    完整代码点击：https://github.com/Exodia/jsdemo/tree/master/desktop-notifications


    相关标签： HTML5教程 HTML5中国 使用HTML5 Notication API实现一个定时提醒工具 html5cn htm

    上一篇： 关于table-row table-cell_html/css_WEB-ITnose

    下一篇： 两列布局中单列定宽单列自适应布局的5种思路 - 小火柴的蓝色理想

    推荐阅读