(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 桌面提醒加強版。如果覺得還不錯，可以幫我點個贊哦~多謝了！