简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

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

WBOY
發布： 2016-05-17 09:08:39
原創
1361 人瀏覽過
       在本文中将利用封装过的API实现一个定时提醒工具。

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

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

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


      HTML&CSS

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



  3.        
  4.                
  5.                 时间提醒
  6.                
  7.                         div {
  8.                                 margin:40px 15px;
  9.                         }
  10.                        
  11.                         #main {                               
  12.                                 margin:0 auto;
  13.                                 width:360px;
  14.                                 border: 2px solid green;
  15.                         }
  16.                        
  17.                         .operation {
  18.                                 text-align:center;
  19.                         }
  20.                        
  21.                
  22.        
  23.        
  24.                

  25.                

  26.                

  27.                

  28.                

  29.                        
  30.                        
  31.                

  •                

  •                
  •                
  •        
    • 复制代码

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

    0000.png


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

          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.                 };
    11.        
    12.        
    13.         /**
    14.          *调用例子：
    15.          * var DN = window.XX.DesktopNotify;
    16.          * DN.requestPermission(function(){
    17.          *           DN.show("http://xxx", "hello", "world");
    18.          * });
    19.          */       
    20.         var DesktopNotify = {
    21.                
    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.                 },

    41.                
    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.                 },
    62.                
    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.                 },
    78.                
    79.                 /**
    80.                  * 检查是否得到授权
    81.                  * @return {Boolean}： true表示得到授权
    82.                  */
    83.                 isPermitted: function() {
    84.                         return this.checkPermission() === 0;
    85.                 },
    86.                
    87.                
    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.                 },
    99.                
    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.                 },
    110.                
    111.                 /**
    112.                  * 创建一个HTML性质的通知对话框，但不展示
    113.                  * @param {Object} url: 指向html页面的链接
    114.                  * @return {Object} Notification实例
    115.                  */
    116.                 createHTML: function(url) {
    117.                         return webkitNotifications.createHTMLNotification(url);
    118.                 },
    119.                
    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.                 },
    128.                
    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协议打开，否则无法运行（若用户设置了浏览器接收任何通知，倒是可以直接打开运行）。运行的效果如下：

    000.png


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

          总结

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


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


    相關標籤：
    HTML5教程 HTML5中国 使用HTML5 Notication API实现一个定时提醒工具 html5cn htm
    來源：php.cn
    上一篇：CSS 与 HTML5 响应式图片 下一篇：HTML5画布下js的文字云/标签云效果-D3 Cloud
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章
    最新問題
    MERN stack搜尋方塊和複選框的正規表示式篩選器 我正在嘗試透過邊做邊學來了解MERN堆疊如何協同工作，並且我正在遵循bezcoder的這些教程：Node.js/Express/MongoDb（Github整個程式碼）和React...
    來自於 2024-04-06 14:53:12
    0
    1
    425
    PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
    來自於 2024-04-05 12:57:00
    0
    1
    456
    Prestashop安裝問題：無法安裝自訂模組 我是Prestashop模組開發的新手。我正在嘗試建立艾米的第一個prestashop模組[參考：這是我的程式碼。我按照該教程中的說明進行了所有操作https://devdocs....
    來自於 2024-04-03 19:24:44
    0
    1
    402
    PHP教學：如何使用PHP將文字與圖片上傳到Linkedin？ 我嘗試使用LinkedinsRestAPI上傳文字、圖像和連結(https://learn.microsoft.com/en-us/linkedin/consumer/integr...
    來自於 2024-04-03 18:42:29
    0
    1
    420
    無法從我的 mySQL 資料庫接收訊息，儘管已經看到教程做了完全相同的事情 所以我正在嘗試製作一個讀取和寫入MySQL資料庫的程序，這讓我找到了YouTube教學。我的問題是，儘管經歷了與教程中的人完全相同的過程，但我最終得到了一個空伺服器，儘管應該彈出什...
    來自於 2024-04-03 14:46:04
    0
    1
    298
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！