2018-07-30 13:54:33 363浏览
如今的HTML5从业人员在不断的增加,企业中需要的HTML5工程师也在不断的增长,因此学好HTML5开发技术找到一份满意的好工作是不少参加HTML5培训学习HTML5开发的小伙伴们的心愿,今天扣丁学堂HTML5培训小编就给大家分享一个HTML5开发方面的技能,那就是HTML5实现桌面通知提示功能,喜欢HTML5开发的小伙伴就随小编一起来看一下吧。
具体代码如下所示:
Notification.requestPermission()是个请求
,让浏览器出现是否允许通知的提示和Notification.permission 一样 返回 "3"个值 "granted" "default"
"denied" 户允许通知,用户目前还没有管,用户嫌弃。
<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");
}
})();
以上就是扣丁学堂HTML5在线学习小编给大家分享的HTML5实现桌面通知提示功能的实例,希望对小伙伴们有所帮助,想要了解更多关于HTML5开发方面内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂不仅有专业的HTML5培训班供学员报名学习,还有与时俱进的课程体系与大量的HTML5视频教程供学员免费观看学习哦,想要学好HTML5开发技能的小伙伴快快行动吧。扣丁学堂H5技术交流群:559883758。
【关注微信公众号获取更多学习资料】