最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
科技
当前位置： 首页 - 科技 - 知识百科 - 正文

使用HTML5NoticationAPI实现一个定时提醒工具

来源：动视网 责编：小采 时间：2020-11-27 15:16:26
文档

使用HTML5NoticationAPI实现一个定时提醒工具

使用HTML5NoticationAPI实现一个定时提醒工具: 在本文中将利用封装过的API实现一个定时提醒工具。 工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。 主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知
推荐度：
点击下载本文 文档为doc格式
导读使用HTML5NoticationAPI实现一个定时提醒工具: 在本文中将利用封装过的API实现一个定时提醒工具。 工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。 主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知
 在本文中将利用封装过的API实现一个定时提醒工具。

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

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

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


HTML&CSS

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





  5. 时间提醒
















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



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

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 Notification做了一个简单的小工具，用于提醒自己不要久坐，按时休息= =！虽然界面是丑陋了点，不过效果还可以。


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


文档

使用HTML5NoticationAPI实现一个定时提醒工具

使用HTML5NoticationAPI实现一个定时提醒工具: 在本文中将利用封装过的API实现一个定时提醒工具。 工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。 主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知
推荐度：
点击下载本文 文档为doc格式
标签： 提醒 使用html5 使用html5noticationapi实现一个定时提醒工具
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
产品服务 发展历程 企业资讯 企业文化 关于我们 加入我们 联系我们 网站导航 网站律师

Copyright © 2019-2025 51dongshi.net 版权所有

赣ICP备2023002352号-34

违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务

Top