HTML5 桌面提醒

效果真不错，脱离桌面也可进行提醒。可以弄个每工作45分钟就出去休息15分钟的小贴士或者是类似 google calendar 的东东。

效果如图：

以下转自：http://www.cnblogs.com/yiciyun/archive/2012/09/02/2667863.html

HTML5开发桌面提醒功能 Demo html5-desktop-notification.html (只支持 Chrome 浏览器)

详见代码：

<!DOCTYPE HTML>
 <html>
 <head
 <meta charset="gbk">  
 <title>Creating OS notifications in HTML5</title>
 </head>
 <body>
 <input type="button" value="验证授权" onclick="init();" />
 <input type="button" value="弹出消息" onclick="notify();" />
 &lt;script type="text/javascript"&gt;
     const miao = 5;

     function init() {
         if (window.webkitNotifications) {
             window.webkitNotifications.requestPermission();
         }
     }

     function notify() {
         var icon = "logo.png";
         var title = "Hello World";
         var body =  "You Are My World (5秒后自动关闭)";

         if (window.webkitNotifications) {
             if (window.webkitNotifications.checkPermission() == 0) {
                 var popup = window.webkitNotifications.createNotification(icon, title, body);
                 popup.ondisplay = function(event) {
                     setTimeout(function() {
                         event.currentTarget.cancel();
                     }, miao * 1000);
                 }
                 popup.show();
                 popup.show();
             } else {
                 window.webkitNotifications.requestPermission();
                 return;
             }
         }
     }
 &lt;/script&gt;

</body>

</html>

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！