(HTML5)HTML5 Web Notification桌面通知實踐

這幾天偶然翻到了張鑫旭的文章簡單瞭解HTML5中的Web Notification桌面通知。一看到這個應用就有點興奮，由於這不一樣於平常的前端開發，是一種很新穎的功能（早就瞭解的老司機請無視~）。邊讀我就邊照着代碼跑了一遍，效果不錯。在這個功能的啓發之下，我打算作個小功能，相似todo任務的桌面提醒，詳細內容待我慢慢道來~

具體功能點就是，經過頁面設置桌面提醒的時間和提醒內容，而後到了目標時間就會以桌面提醒的方式給用用戶提示。樣式就像下圖這樣

具體實現

HTML5 Web Notification的具體用法你們能夠看張鑫旭的博客，介紹的詳細，還有實例！具體本文例子的實現以下：

1. 設置當前的可選小時，分鐘，秒鐘等，而後生成checkbox，供用戶選擇。這部分比較簡單，經過 js 的 Date 對象的一系列 get 方法，便可得到當前小時等信息，而後生成其餘的小時，分鐘等時間便可。這裏以生成小時爲例：

   function getAllHour( hour, hours ) {
      if ( hour < 24 ) {
        hours.push( hour );
        arguments.callee( ++hour, hours );
   
      }
      return hours;
    }
    function initNotiHour() {
      var hourContainer = document.getElementById( 'select-hour' );
      var currentHour = new Date().getHours();
      var hours = [];
      var allHours = getAllHour( currentHour, hours );
   
      allHours.forEach( function( item, index ) {
        hourContainer.innerHTML += '<option>' + item + '</option>';
      } );
    }

2. 咱們生成了可供用戶選擇的時間以後，用戶就能夠本身設置本身想要的時間了。而後咱們也能夠經過 checkbox 的 value 屬性獲取用戶的設置。那麼問題來了，如何咱們如何判斷到了用戶的設置時間呢？
   其實 Date 對象的 set 系列的方法就是用來作這個事情的，我能夠設置一個將來而時間，而後不停的用當前時間和它做比較，若是兩者相等，就代表時間到了。
   具體看代碼:

   function setTargetTime() {
      var date = new Date();
   
      date.setHours( getUserTime( 'select-hour' ) );
      date.setMinutes( getUserTime( 'select-minute' ) );
      date.setSeconds( getUserTime( 'select-second' ) );
   
      return date;
    }

3. 咱們如今獲得了用戶設置的目標時間，咱們只須要不斷地獲取當前時間，這個不難，對了，如何比較兩個時間相等來着 ？ 我感受這個問題就怕想複雜，其實用 Date 的 getTime() 方法或者兩個時間的具體毫秒數比較就能夠了！！！

4. 而後接下來就能夠複用張鑫旭的代碼，來處理具體桌面提醒部分的功能了！

總結，這個下來比較簡單就實現了一個簡易的桌面提醒小功能！具體 demo 你們想看的能夠去 HTML5 Web Notification 桌面提醒增強版。若是以爲還不錯，能夠幫我點個贊哦~多謝了！