HTML5之桌面提醒

最新推荐文章于 2021-06-23 15:12:54 发布

weixin_34087307

最新推荐文章于 2021-06-23 15:12:54 发布

阅读量112

点赞数

文章标签： python

原文链接：https://my.oschina.net/bojinzhu/blog/64981

版权

2019独角兽企业重金招聘Python工程师标准>>>

啥也不说，先上图片和代码。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5桌面消息提示--铂金小猪</title>
<script src="http://my.oschina.net/js/2012/jquery-1.7.1.min.js"></script>
<script>
  function DN() {}//装逼用，大家可以不用这种！
    DN.prototype.isDN = function() {
     if(window.webkitNotifications){return true}else{return false};
    }
    DN.prototype.Notify = function(icon, title, content) {
      if (window.webkitNotifications.checkPermission() == 0) {//检测有木同意本域使用提醒
	if(content==""){alert("亲，表调戏我嘛··");return;};
        var tip = window.webkitNotifications.createNotification(icon="http://my.oschina.net/img/favicon.ico", title, content);
	tip.show();
        return true;
      }
      window.webkitNotifications.requestPermission();//提示是否允许桌面提醒
      return false;
 }
    $(function() {
      var tip = new DN();
      if (!tip.isDN()) {
       alert("小样儿，你这浏览器还想玩提醒？");
        return;
      }
      $("#tip").click(function() {
      	var content=$('#msgs').val();
        tip.Notify("", "OSC铂金小猪",content);
      });
    });
  </script>
<style type="text/css">
*{ outline:none;}
#msgs{ border:1px solid #aaa; padding:5px; width:300px; height:200px; box-shadow:1px 0px 10px #CCC; border-radius:5px;}
#tip{ cursor:pointer; border:1px solid #aaa; width:100px; height:30px; box-shadow:1px 0px 10px #CCC; border-radius:5px;}
</style>
  </head>

<body>
<header>
<h1>HTML5桌面消息提示</h1>
</header>
<section>
<textarea id="msgs"></textarea><br>
<input type="button" value="显示一下" id="tip">
</section>
</body>
</html>

其中核心的提示代码为：

function DN() {}//装逼用，大家可以不用这种！
    DN.prototype.isDN = function() {
     if(window.webkitNotifications){return true}else{return false};
    }
    DN.prototype.Notify = function(icon, title, content) {
      if (window.webkitNotifications.checkPermission() == 0) {//检测有木同意本域使用提醒
	if(content==""){alert("亲，表调戏我嘛··");return;};
        var tip = window.webkitNotifications.createNotification(icon="http://my.oschina.net/img/favicon.ico", title, content);
	tip.show();
        return true;
      }
	 window.webkitNotifications.requestPermission();//提示是否允许桌面提醒
      return false;
 }

代码很简单，功能也很简单，还有其他的比如页面为“focus”时不显示桌面提醒等等，可以使用本地存储来保存页面的状态。

转载于:https://my.oschina.net/bojinzhu/blog/64981