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 17 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
CSS3 天气图标动画效果
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&amp;mysql(一)
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP加密解密实例分析
2015/12/25 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
google地图的路线实现代码
2009/08/20 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
vue.js 上传图片实例代码
2017/06/22 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
python开发之str.format()用法实例分析
2016/02/22 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
pywinauto自动化操作记事本
2019/08/26 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
python的flask框架难学吗
2020/07/31 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
建筑项目策划书
2014/01/13 职场文书
八项规定整改方案
2014/02/21 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
党员思想汇报材料
2014/12/19 职场文书
考试后的感想
2015/08/07 职场文书