简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel H5 > le corps du texte

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

WBOY
Libérer： 2016-05-17 09:08:39
original
1360 Les gens l'ont consulté
       在本文中将利用封装过的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


    Étiquettes associées：
    HTML5教程 HTML5中国 使用HTML5 Notication API实现一个定时提醒工具 html5cn htm
    source：php.cn
    Article précédent：CSS 与 HTML5 响应式图片 Article suivant：HTML5画布下js的文字云/标签云效果-D3 Cloud
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    Filtre d'expression régulière pour les champs de recherche et les cases à cocher de la pile MERN J'essaie de comprendre comment la pile MERN fonctionne ensemble en apprenant par la pratiq...
    Depuis 2024-04-06 14:53:12
    0
    1
    425
    Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
    Depuis 2024-04-05 12:57:00
    0
    1
    456
    Problème d'installation de Prestashop : Impossible d'installer le module personnalisé Je suis nouveau dans le développement de modules Prestashop. J'essaie de créer le premier ...
    Depuis 2024-04-03 19:24:44
    0
    1
    402
    Tutoriel PHP : Comment télécharger du texte et des images sur Linkedin en utilisant PHP ? J'essaie de télécharger du texte, des images et des liens à l'aide de LinkedinsRestAPI (ht...
    Depuis 2024-04-03 18:42:29
    0
    1
    420
    Impossible de recevoir des informations de ma base de données MySQL malgré avoir vu des tutoriels faisant exactement la même chose J'essaie donc de créer un programme qui lit et écrit dans une base de données MySQL, ce qu...
    Depuis 2024-04-03 14:46:04
    0
    1
    298
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！