pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

使用HTML5 Notication API實現一個定時提醒工具

html5教程 html5模板網
在本文中將利用封裝過的API實現一個定時提醒工具。 工具的主要目的是：自己經常坐在電腦前，一坐就是好幾個小時，希望有工具能夠每小時提醒自己起來活動休息一會。 主要功能有：
       在本文中將利用封裝過的API實現一個定時提醒工具。

       工具的主要目的是：自己經常坐在電腦前，一坐就是好幾個小時，希望有工具能夠每小時提醒自己起來活動休息一會。

       主要功能有：用戶可以設置周期性的提醒時間，比如設置每1小時提醒一次，1小時后將彈出通知框提醒用戶時間到。

       其他包括：用戶能夠設置對話框的持續時間，比如持續15秒，15秒后對話框消失，以及提醒內容等。


      HTML&CSS

      首先先創建基本的HTML結構如下：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>時間提醒</title>
  6.                 <style>
  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.                 </style>
  22.         </head>
  23.         <body>
  24.                 <div id="main">
  25.                 <div><label for="interval">設置時間間隔（分）：<input id="interval" type="number" value="60" /></label></div>
  26.                 <div><label for="duration">彈窗持續時間（分）：<input id="duration" type="number"  value="1" /></label></div>
  27.                 <div><label for="content">設置提醒消息：<textarea id="content" >你已經做了很久啦，讓眼睛放松放松吧~~！</textarea></label></div>
  28.                 <div class="operation">
  29.                         <input type="button" value="開始" id="start" />
  30.                         <input type="button" value="停止" id="stop" />
  31.                 </div>
  32.                 </div>
  33.                 <script src="desktopNotify.js"></script>
  34.                 <script src="desktop-notification.js"></script>
  35.         </body>
  36. </html>
復制代碼

      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


【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。那么你接下
下面小編就為大家帶來一篇使用Html5實現異步上傳文件,支持跨域,帶有上傳進度條。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了使用HTML5 Canvas創建動態粒子網格動畫，非常具有實用價值，需要的朋友可以參考下。
主站蜘蛛池模板： ERP企业管理系统永久免费版_在线ERP系统_OA办公_云版软件官网 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 冷轧机|两肋冷轧机|扁钢冷轧机|倒立式拉丝机|钢筋拔丝机|收线机-巩义市华瑞重工机械制造有限公司 | 机器视觉检测系统-视觉检测系统-机器视觉系统-ccd检测系统-视觉控制器-视控一体机 -海克易邦 | 蒜肠网-动漫,二次元,COSPLAY,漫展以及收藏型模型,手办,玩具的新媒体.（原变形金刚变迷TF圈) | 塑料熔指仪-塑料熔融指数仪-熔体流动速率试验机-广东宏拓仪器科技有限公司 | 【法利莱住人集装箱厂家】—活动集装箱房,集装箱租赁_大品牌,更放心 | 高效节能电机_伺服主轴电机_铜转子电机_交流感应伺服电机_图片_型号_江苏智马科技有限公司 | 泥沙分离_泥沙分离设备_泥砂分离机_洛阳隆中重工机械有限公司 | NMRV减速机|铝合金减速机|蜗轮蜗杆减速机|NMRV减速机厂家-东莞市台机减速机有限公司 | 网站建设,北京网站建设,北京网站建设公司,网站系统开发,北京网站制作公司,响应式网站,做网站公司,海淀做网站,朝阳做网站,昌平做网站,建站公司 | 电动车头盔厂家_赠品头盔_安全帽批发_山东摩托车头盔—临沂承福头盔 | 高低温试验房-深圳高低温湿热箱-小型高低温冲击试验箱-爱佩试验设备 | 打孔器,打孔钳厂家【温州新星德牌五金工具】 | 无负压供水设备,消防稳压供水设备-淄博创辉供水设备有限公司 | 一体化净水器_一体化净水设备_一体化水处理设备-江苏旭浩鑫环保科技有限公司 | 全国国际学校排名_国际学校招生入学及学费-学校大全网 | 山东包装,山东印刷厂,济南印刷厂-济南富丽彩印刷有限公司 | 压滤机滤板_厢式_隔膜_板框压滤机滤板厂家价格型号材质-大凯环保 | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 | 厦门网站建设_厦门网站设计_小程序开发_网站制作公司【麦格科技】 | 艺术生文化课培训|艺术生文化课辅导冲刺-济南启迪学校 | 电子书导航网_电子书之家_电子书大全_最新电子书分享发布平台 | 隐形纱窗|防护纱窗|金刚网防盗纱窗|韦柏纱窗|上海青木装潢制品有限公司|纱窗国标起草单位 | 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | 恒温槽_恒温水槽_恒温水浴槽-上海方瑞仪器有限公司 | 企小优-企业数字化转型服务商_网络推广_网络推广公司 | 风信子发稿-专注为企业提供全球新闻稿发布服务 | 杭州货架订做_组合货架公司_货位式货架_贯通式_重型仓储_工厂货架_货架销售厂家_杭州永诚货架有限公司 | 化妆品加工厂-化妆品加工-化妆品代加工-面膜加工-广东欧泉生化科技有限公司 | 旋转/数显粘度计-运动粘度测定仪-上海平轩科学仪器 | 聚合氯化铝价格_聚合氯化铝厂家_pac絮凝剂-唐达净水官网 | 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 压滤机滤板_厢式_隔膜_板框压滤机滤板厂家价格型号材质-大凯环保 | 玻璃钢型材-玻璃钢风管-玻璃钢管道,生产厂家-[江苏欧升玻璃钢制造有限公司] | 不锈钢水箱生产厂家_消防水箱生产厂家-河南联固供水设备有限公司 | led全彩屏-室内|学校|展厅|p3|户外|会议室|圆柱|p2.5LED显示屏-LED显示屏价格-LED互动地砖屏_蕙宇屏科技 | 礼仪庆典公司,礼仪策划公司,庆典公司,演出公司,演艺公司,年会酒会,生日寿宴,动工仪式,开工仪式,奠基典礼,商务会议,竣工落成,乔迁揭牌,签约启动-东莞市开门红文化传媒有限公司 | 北京工业设计公司-产品外观设计-产品设计公司-千策良品工业设计 北京翻译公司-专业合同翻译-医学标书翻译收费标准-慕迪灵 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 |