コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド 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 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    もっと見る

    人気の記事

    R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
    2週間前 By 尊渡假赌尊渡假赌尊渡假赌
    レポ：チームメイトを復活させる方法
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
    4週間前 By 尊渡假赌尊渡假赌尊渡假赌
    スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
    3週間前 By DDD
    R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？
    3週間前 By DDD
    もっと見る

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト（SublimeText3）

    もっと見る

    ホットトピック

    Gmailメールのログイン入り口はどこですか？
    7338
    9
    Java チュートリアル
    1627
    14
    CakePHP チュートリアル
    1352
    46
    Laravel チュートリアル
    1265
    25
    PHP チュートリアル
    1210
    29
    もっと見る
    Related knowledge
    HTML5 Webサイトにオーディオを追加する方法は？ HTML5 Webサイトにオーディオを追加する方法は？ Mar 10, 2025 pm 03:01 PM

    この記事では、＆lt; audio＆gt;を使用してHTML5にオーディオを埋め込む方法について説明します。フォーマット選択のベストプラクティス（MP3、OGG Vorbis）、ファイルの最適化、および再生のためのJavaScriptコントロールを含む要素。 複数のオーディオfを使用して強調しています

    ユーザー入力にHTML5フォームを使用する方法は？ ユーザー入力にHTML5フォームを使用する方法は？ Mar 10, 2025 pm 02:59 PM

    この記事では、HTML5フォームを作成および検証する方法について説明します。 ＆lt; form＆gt;の詳細要素、入力タイプ（テキスト、電子メール、番号など）、および属性（必須、パターン、MIN、最大）。 HTML5の利点は、古い方法よりも形成されます

    HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか？ HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか？ Mar 13, 2025 pm 07:51 PM

    この記事では、HTML5ページの可視性APIを使用して、ページの可視性を検出し、ユーザーエクスペリエンスを向上させ、リソースの使用量を最適化します。重要な側面には、メディアの一時停止、CPU負荷の削減、視認性の変化に基づいて分析の管理が含まれます。

    ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか？ ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか？ Mar 13, 2025 pm 08:00 PM

    この記事では、ビューポートメタタグを使用してモバイルデバイスのページスケーリングを制御し、最適な応答性とパフォーマンスのために幅や初期スケールなどの設定に焦点を当てています。

    Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか？ Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか？ Mar 18, 2025 pm 02:16 PM

    この記事では、Geolocation APIを使用してユーザーの場所のプライバシーと許可を管理し、アクセス許可を要求するためのベストプラクティスを強調し、データセキュリティを確保し、プライバシー法を遵守することについて説明します。

    HTML5とJavaScriptでインタラクティブなゲームを作成する方法は？ HTML5とJavaScriptでインタラクティブなゲームを作成する方法は？ Mar 10, 2025 pm 06:34 PM

    この記事では、JavaScriptを使用してインタラクティブなHTML5ゲームの作成を詳述しています。 ゲームデザイン、HTML構造、CSSスタイリング、JavaScriptロジック（イベント処理とアニメーションを含む）、およびオーディオ統合をカバーしています。 必須JavaScriptライブラリ（Phaser、PI

    インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか？ インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか？ Mar 18, 2025 pm 02:17 PM

    この記事では、HTML5ドラッグアンドドロップAPIを使用してインタラクティブなユーザーインターフェイスを作成し、要素をドラッグ可能にし、キーイベントを処理し、カスタムフィードバックを使用してユーザーエクスペリエンスを強化する手順を作成する方法について説明します。また、aへの一般的な落とし穴についても説明します

    クライアントとサーバー間の双方向通信にHTML5 WebSockets APIを使用するにはどうすればよいですか？ クライアントとサーバー間の双方向通信にHTML5 WebSockets APIを使用するにはどうすればよいですか？ Mar 12, 2025 pm 03:20 PM

    この記事では、リアルタイムの双方向のクライアントサーバー通信のために、HTML5 WebSockets APIについて説明します。 クライアントサイド（JavaScript）とサーバー側（Python/Flask）の実装を詳述し、スケーラビリティ、状態管理、などの課題に対処します。

    See all articles