社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 H5教程 使用HTML5 Notication API实现一个定时提醒工具

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 17, 2016 am 09:08 AM
       在本文中将利用封装过的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


    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序，用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

    顯示更多

    熱門文章

    如何修復KB5055523無法在Windows 11中安裝？
    4 週前 By DDD
    如何修復KB5055518無法在Windows 10中安裝？
    4 週前 By DDD
    <🎜>：種植花園 - 完整的突變指南
    3 週前 By DDD
    <🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    如何修復KB5055612無法在Windows 10中安裝？
    3 週前 By DDD
    顯示更多

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版，非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    顯示更多

    熱門話題

    Java教學
    1664
    14
    CakePHP 教程
    1423
    52
    Laravel 教程
    1317
    25
    PHP教程
    1268
    29
    C# 教程
    1244
    24
    顯示更多
    Related knowledge
    H5指的是什麼？探索上下文 H5指的是什麼？探索上下文 Apr 12, 2025 am 12:03 AM

    H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

    H5：網絡標準和技術的發展 H5：網絡標準和技術的發展 Apr 15, 2025 am 12:12 AM

    Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

    H5代碼：Web開發人員的最佳實踐 H5代碼：Web開發人員的最佳實踐 Apr 16, 2025 am 12:14 AM

    H5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

    H5：工具，框架和最佳實踐 H5：工具，框架和最佳實踐 Apr 11, 2025 am 12:11 AM

    H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

    H5是HTML5的速記嗎？探索細節 H5是HTML5的速記嗎？探索細節 Apr 14, 2025 am 12:05 AM

    H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

    H5和HTML5：網絡開發中常用的術語 H5和HTML5：網絡開發中常用的術語 Apr 13, 2025 am 12:01 AM

    H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

    HTML5的遺產：當前了解H5 HTML5的遺產：當前了解H5 Apr 10, 2025 am 09:28 AM

    HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

    了解H5代碼：HTML5的基本原理 了解H5代碼：HTML5的基本原理 Apr 17, 2025 am 12:08 AM

    HTML5是構建現代網頁的關鍵技術，提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等，增強了網頁結構和SEO。 2.支持多媒體元素和，無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性，簡化了驗證過程。 4.提供了離線和本地存儲功能，提升了網頁性能和用戶體驗。

    See all articles