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的 fit-content实现水平居中
Sep 07 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
asp批量修改记录的代码
2008/06/25 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
sails框架的学习指南
2014/12/22 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
文艺演出策划方案
2014/06/07 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
走群众路线学习笔记
2014/11/06 职场文书
房屋认购协议书
2015/01/29 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript