• 首页
  • 电影
  • Js
  • 前端
  • 新旅
  • 奇技
  • 网安
  • 歌单
  • 关于
  • 搜索
  • 夜间模式
    ©2013-2025  成长小破站 Theme by OneBlog
    搜索
    标签
    # css # js # uniapp # ps # chrome # 小程序 # javascript # 布局 # typecho # 激活码
  • 首页>
  • Javascript>
  • 正文
  • chrome右下角通知效果

    2018年06月29日 1.7 k 阅读 0 评论 1165 字

    HTML代码:
    <button id="button">有人想加你为好友</button>
    <p id="text"></p>
    JS代码:
    if (window.Notification) {
        var button = document.getElementById('button'), text = document.getElementById('text');
        
        var popNotice = function() {
            if (Notification.permission == "granted") {
                var notification = new Notification("Hi,帅哥:", {
                    body: '可以加你为好友吗?',
                    icon: '//image.zhangxinxu.com/image/study/s/s128/mm1.jpg'
                });
                
                notification.onclick = function() {
                    text.innerHTML = '张小姐已于' + new Date().toTimeString().split(' ')[0] + '加你为好友!';
                    notification.close();    
                };
            }    
        };
        
        button.onclick = function() {
            if (Notification.permission == "granted") {
                popNotice();
            } else if (Notification.permission != "denied") {
                Notification.requestPermission(function (permission) {
                  popNotice();
                });
            }
        };
    } else {
        alert('浏览器不支持Notification');    
    }
    本文著作权归作者 [ admin ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    chrome
    取消回复

    发表留言
    回复

    首页电影Js前端新旅奇技网安歌单关于
    Copyright©2013-2025  All Rights Reserved.  Load:0.036 s
    豫公网安备41050202000235   豫ICP备18019224号-2
    Theme by OneBlog V3.6.4
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。