HTML5实现桌面通知 提示功能


Posted in HTML / CSS onOctober 11, 2017

具体代码如下所示:

<button id="button">有人想加你为好友</button>
<p id="text"></p>
;(function (){
    if(window.Notification){
        var btn = document.getElementById("button");
        var txt = document.getElementById("text");
        btn.onclick = function (){
            if(Notification.permission == "granted"){
                popNotice();
            }else if(Notification.permission != "denied"){
                Notification.requestPermission().then(function (permission){
                    popNotice()
                })
            }
        };
        function popNotice(){
            if(Notification.permission == "granted"){
                var notification = new Notification("你好:",{
                    body:"请问今晚有空吗",
                    icon:"http://image.zhangxinxu.com/左边头像地址"
                });
                notification.onclick = function (){
                    txt.innerHTML = new Date().toTimeString().split(" ")[0]+"收到信息";
                    notification.close();
                }
            }
        }
    }else{
        console.log("浏览器不支持Notification");
    }
})();

Notification.requestPermission()是个请求 ,让浏览器出现是否允许通知的提示 和 Notification.permission 一样 返回 "3"个值 "granted" "default" "denied" 户允许通知, 用户目前还没有管, 用户嫌弃

总结

以上所述是小编给大家介绍的HTML5实现桌面通知 提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 #HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 #HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 #HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 #HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 #HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 #HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 #HTML / CSS
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
智利最大的网上商店:Linio智利
2016/11/24 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
简历的自荐信
2013/12/19 职场文书
服务承诺口号
2014/05/22 职场文书
党员领导干部承诺书
2014/05/28 职场文书
学校社会实践活动总结
2014/07/03 职场文书
自我推荐信怎么写
2015/03/24 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
Python学习之迭代器详解
2022/04/01 Python
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android