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学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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 用数组降低程序的时间复杂度
2009/12/04 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
linux下php上传文件注意事项
2016/06/11 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
js中getter和setter用法实例分析
2018/08/14 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
什么是规则表达式
2012/05/03 面试题
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
法律进机关实施方案
2014/03/12 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
论文答辩开场白大全
2015/05/27 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书