美文网首页
通过闪烁标题来实现web消息通知的小demo

通过闪烁标题来实现web消息通知的小demo

作者: 小菜101 | 来源:发表于2017-07-17 09:36 被阅读0次

    一段js代码模拟实现web消息推送的功能,通过闪烁文档的标题来实现,代码如下:

    var titleInit = document.title, isShine = true;
        setInterval(function() {
            var title = document.title;
            if (isShine == true) {
                if (/新/.test(title) == false) {
                    document.title = '【你有新消息】';    
                } else {
                    document.title = '【     】';
                }
            } else {
                document.title = titleInit;
            }
        }, 500);
            
        window.onfocus = function() {
            isShine = false;
        };
        window.onblur = function() {
            isShine = true;
        };
        
        // for IE
        document.onfocusin = function() {
            isShine = false;
        };
        document.onfocusout = function() {
            isShine = true;
        };
    

    效果如下:

    如图示效果

    相关文章

      网友评论

          本文标题:通过闪烁标题来实现web消息通知的小demo

          本文链接:https://www.haomeiwen.com/subject/tacfkxtx.html