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 03 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Python 从attribute到property详解
2020/03/05 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
简历的自我评价范文
2014/02/04 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers