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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
$.ajax json数据传递方法
2008/11/19 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
angular中的post请求处理示例详解
2020/06/30 Javascript
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
使用python实现画AR模型时序图
2019/11/20 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
中学教师岗位职责
2013/11/26 职场文书
个人简历自我评价范文
2014/02/04 职场文书
总经理助理工作职责
2014/02/06 职场文书
师范类求职信
2014/06/21 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android