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画一个阴阳八卦图
Mar 09 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
使用CSS实现音波加载效果
May 07 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 类型转换函数intval
2009/06/20 PHP
解析php中memcache的应用
2013/06/18 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
RC4文件加密的python实现方法
2015/06/30 Python
python主线程捕获子线程的方法
2018/06/17 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
《世界多美呀》教学反思
2014/03/02 职场文书
副董事长岗位职责
2014/04/02 职场文书
亲属关系公证书
2014/04/08 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android