(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 桌面提醒加强版。如果觉得还不错，可以帮我点个赞哦~多谢了！