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实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 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实现ping
2006/10/09 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
列表内容的选择
2006/06/30 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
javascript常用方法总结
2015/05/14 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python代码制作configure文件示例
2014/07/28 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
pandas删除指定行详解
2019/04/04 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python线性插值解析
2020/07/05 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
满月酒主持词
2014/03/27 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
演讲稿开场白台词
2014/08/25 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
课外活动实习计划
2015/01/19 职场文书
个人更名证明
2015/06/23 职场文书
数学备课组工作总结
2015/08/12 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL