(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 桌面提醒增强版。若是以为还不错，能够帮我点个赞哦~多谢了！