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制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 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
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
详解Python中dict与set的使用
2015/08/10 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python内建模块struct实例详解
2018/02/02 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python selenium firefox使用详解
2019/02/26 Python
Python3并发写文件与Python对比
2019/11/20 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
中学生评语大全
2014/04/18 职场文书
体操比赛口号
2014/06/10 职场文书
普通话演讲稿
2014/09/03 职场文书
公司慰问信范文
2015/03/23 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js