HTML5 之 notifications

短命女 2022-03-17 11:20 157阅读 0赞

<!DOCTYPE HTML>
    <html>
    <head
    <meta charset="gbk">  
    <title>HTML5 之 notifications</title>
    </head>
    <body>
    <input type="button" value="验证授权" οnclick="init();" />
    <input type="button" value="弹出消息" οnclick="notify();" />
    
     
        <script type="text/javascript">
            const miao = 5;
     
            function init() {
                if (window.webkitNotifications) {
                    window.webkitNotifications.requestPermission();
                }
            }
     
            function notify() {
                var icon = "logo.png";
                var title = "窗口将在 " + miao + " 5后关闭";
                var body =  "桌面提醒API";
     
                if (window.webkitNotifications) {
                    if (window.webkitNotifications.checkPermission() == 0) {
                        var popup = window.webkitNotifications.createNotification(icon, title, body);
                        popup.ondisplay = function(event) {
                            setTimeout(function() {
                                event.currentTarget.cancel();
                            }, miao * 1000);
                        }
                        popup.show();
                    } else {
                        window.webkitNotifications.requestPermission();
                        return;
                    }
                }
            }
        </script>
     
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5：notification(浏览器通知)

一、notification简介 Web Notifications是HTML5 的一个特性，目前我知道的有谷歌浏览器和windows edge对它进行了支持，用于向用户

矫情吗；*/ 2024年03月30日 10:53/ 0 赞/ 35 阅读

相关【HTML】HTML5中的Web Notification桌面通知

大家在做一些浏览器端的聊天功能的时候，或者在一些网站跟在线客服咨询的时候，会看到一些消息通知的提示，常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。这里简单的介绍一下如何实现这

阳光穿透心脏的1/2处/ 2022年12月27日 01:27/ 0 赞/ 135 阅读

相关 HTML消息提醒（Notification）

function MessageNotice() { this.defaultTitle = document.title; this.

深碍√TFBOYSˉ_/ 2022年09月26日 02:52/ 0 赞/ 244 阅读

相关 HTML5 Web Notifications（网页通知）

概述通常我们在网页中需要通知提醒用户可以：①使用原生alert；②漂亮一点用layer等弹出框；③使用bootstrap等.alert样式直接显示在页面上等等。那么，为

川长思鸟来/ 2022年09月11日 04:15/ 0 赞/ 169 阅读

相关 android之Notification通知

我们在用手机的时候，如果来了短信，而我们没有点击查看的话，是不是在手机的最上边的状态栏里有一个短信的小图标提示啊？你是不是也想实现这种功能呢？今天的Notification就是

逃离我推掉我的手/ 2022年08月08日 11:58/ 0 赞/ 217 阅读

相关 Android之Notification

[Android之Notification的多种用法 ][Android_Notification_] 标签： [ notification][notification]

缺乏、安全感/ 2022年07月29日 11:37/ 0 赞/ 152 阅读

相关 cc2541之Notification

从机给主机发送数据有两种方式：第一种：通过GATT_Notification（）这个函数来通知主机。第二种：通过GATTServApp_Proces

旧城等待，/ 2022年06月11日 04:10/ 0 赞/ 296 阅读

相关 HTML5开启浏览器桌面通知 Web Notification

![70][] 说明： 1、Chrome要求必须https才可以开启浏览器通知 2、显示图片在本服务器，不支持跨越 3、自定义声音Chrome不播放，Firefo

淡淡的烟草味﹌/ 2022年05月18日 10:09/ 0 赞/ 292 阅读

相关 HTML5 Notification实现浏览器通知

需求需要实现当浏览器最小化时，如果有新通知，实现浏览器闪烁，或者实在不行在浏览器标题栏闪烁（这个似乎相当于没有通知。。）。基于技术研究的目的，在网络上查找有没有相关实现方式，发

喜欢ヅ旅行/ 2022年04月05日 08:57/ 0 赞/ 469 阅读

相关 HTML5 之 notifications

<!DOCTYPE HTML> <html> <head <meta charset="gbk"> <title>HTML5 之 n

短命女/ 2022年03月17日 11:20/ 0 赞/ 158 阅读