Vanessa

大前端的点滴生活

HTML5 桌面提醒

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

效果如图:

chrome 桌面提示

以下转自: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();" />

     <script type="text/javascript">
         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;
                 }
             }
         }
     </script>

 </body>
 </html>

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

留下你的脚步