Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤 Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载  Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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();" />
 &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;


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

留下你的脚步