zoukankan      html  css  js  c++  java
  • html5 notifications通知

    http://www.html5rocks.com/en/tutorials/notifications/quick/?redirect_from_locale=zh

    http://www.paulund.co.uk/html5-notifications

    http://www.w3.org/TR/notifications/#displaying-notifications

    示例:

    <!DOCTYPE HTML>  
    <!-- http://dhtmlexamples.com/2011/01/28/creating-os-notifications-in-html5/ -->  
    <html>  
    <head>  
        <title>Creating OS notifications in HTML5</title>  
    </head>  
    <body>  
       
        <form>  
            <input type="button" value="Hey, do you want to show notifications or not?" onclick="init();" />  
            <input type="button" value="Send OS notification" onclick="notify();" />  
        </form>  
       
        <script type="text/javascript">  
            const AUTO_CLOSE_DELAY_SECONDS = 5;  
       
            function init() {  
                if (window.webkitNotifications) {  
                    window.webkitNotifications.requestPermission();  
                }  
            }  
       
            function notify() {  
                var icon = "accept.png";  
                var title = "[" + new Date().toLocaleTimeString() + "] This notification will close in " + AUTO_CLOSE_DELAY_SECONDS + " seconds";  
                var body =  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id magna ut sapien sodales ultricies eget nec metus. Pellentesque molestie nunc nec leo iaculis eu dictum ante porta. Sed adipiscing condimentum sapien a scelerisque. Quisque luctus elit vel odio semper iaculis. Nunc sit amet neque justo. Phasellus ullamcorper dui vel risus varius vitae aliquet purus consectetur. Fusce felis nibh, volutpat ac ornare at, ullamcorper eget lacus. Nunc euismod iaculis porta. In hac habitasse platea dictumst. Proin a sem sed neque tincidunt scelerisque eget in elit. Ut quis felis quis tortor sollicitudin sollicitudin id quis tortor. Nunc porttitor diam id leo lobortis aliquet. Nam scelerisque molestie dolor, placerat hendrerit urna euismod eu. Praesent nec massa enim. Donec nec urna dignissim nunc fringilla luctus. Nunc pretium urna et diam accumsan fermentum. Vivamus condimentum lectus vitae mi vulputate pulvinar. Curabitur adipiscing ultrices arcu. Vestibulum luctus malesuada erat sit amet rutrum. Nam feugiat lectus quis libero adipiscing laoreet.";  
       
                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();  
                            }, AUTO_CLOSE_DELAY_SECONDS * 1000);  
                        }  
                        popup.show();  
                    } else {  
                        window.webkitNotifications.requestPermission();  
                        return;  
                    }  
                }  
            }  
        </script>  
       
    </body>  
    </html>  
  • 相关阅读:
    php 字符串查找
    php缓存与加速分析与汇总
    oracle 时间问题
    mysql数据迁移
    浅谈千万级PV/IP规模高性能高并发网站架构
    对memcache分布式的一点理解
    美国程序员将工作廉价外包给中国公司遭解雇
    16个Linux服务器监控命令
    在yii中使用memcache
    Windows电脑快捷健大全
  • 原文地址:https://www.cnblogs.com/youxin/p/3411615.html
Copyright © 2011-2022 走看看