查看: 59|回复: 0

扣丁学堂浅谈如何实现HTML5桌面通知提示

发表于 2018-8-15 11:53:23
如今的HTML5从业人员在不断的增加,企业中需要的HTML5工程师也在不断的增长,因此学好HTML5开发技术找到一份满意的好工作是不少参加HTML5培训学习HTML5开发的小伙伴们的心愿,今天扣丁学堂HTML5培训小编就给大家分享一个HTML5开发方面的技能,那就是HTML5实现桌面通知提示功能,喜欢HTML5开发的小伙伴就随小编一起来看一下吧。


具体代码如下所示:
<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在线学习小编给大家分享的HTML5实现桌面通知提示功能的实例,希望对小伙伴们有所帮助,想要了解更多关于HTML5开发方面内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂不仅有专业的HTML5培训班供学员报名学习,还有与时俱进的课程体系与大量的HTML5视频教程供学员免费观看学习哦,想要学好HTML5开发技能的小伙伴快快行动吧。扣丁学堂H5技术交流群:559883758。


文章转载自:扣丁学堂http://www.codingke.com/



回复

使用道具 举报