一个简单美观的网站右下角通知代码 提升用户关注度

发布于 2018-10-31  152 次阅读


使用方法:

复制代码,根据自己的需求改一些代码


将其复制到一个文本文件里面,更改文件名为:*****.js
然后再你自己需要的地方调用这个js就可以了,一般来说放在header文件中就行了。要使用本功能必须的将通知选项打开才能看到效果

<script>
  var popNotice = function() {
    //获取用户授权状态
    if (Notification.permission == "granted") {
      var notification = new Notification("Hi,欢迎观看本文章哦", {
        //很明显这是正文
        body: '各位小哥哥小姐姐喜欢本站就留言互访吧,我会每天不定时的访问各位的站点。',
        //很明显这是图标
        icon: 'logo.png'
      });
      //消息被点击事件
      notification.onclick = function() {
        //alert('别逗了,我们永远都是朋友');
        //窗口关闭动作
        notification.close();
      };
      //消息被关闭事件
      notification.onclose = function() {
        alert('你不爱我了');
        notification.close();
      };
      //消息出现错误事件
      notification.onerror = function() {
        alert('上帝也不知道发生了什么');
        notification.close();
      };
    }
  };
if (window.Notification) {
  if (Notification.permission == "granted") {
    popNotice();
  } else if (Notification.permission != "denied") {
    Notification.requestPermission(function(permission) {
      popNotice();
    });
  }
} else {
  alert('浏览器不支持Notification');
} 
</script>

右下角就是例子哦


本当の声を響かせてよ