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 05 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 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自动生成月历代码
2006/10/09 PHP
一个php作的文本留言本的例子(二)
2006/10/09 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
php缓冲输出实例分析
2015/01/05 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python zip()函数用法实例分析
2018/03/17 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
浅析python redis的连接及相关操作
2019/11/07 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
Python @property装饰器原理解析
2020/01/22 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
室内设计自我鉴定
2013/10/15 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书