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 相关文章推荐
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
思想汇报格式
2014/01/05 职场文书
结婚典礼证婚词
2014/01/08 职场文书
学员自我鉴定
2014/03/19 职场文书
我的小天地教学反思
2014/04/30 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
初中家长意见
2015/06/03 职场文书
论文评审意见
2015/06/05 职场文书
小学运动会加油词
2015/07/18 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL