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

一段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;
    };

效果如下:

如图示效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,635评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,269评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,300评论 4 61
  • 2017年9月20日 周三 天气雨 昨天上午我再次看到了自己「特别希望得到别人认可和信任」的记忆,这也同时是妈妈从...
    crysatljingjing阅读 193评论 0 0
  • 1.我不想成为别人心中的No1,只想成为自己心中的。 2.只要你有好的平台,去做你的欲望就可以撑的起你的野心。 3...
    艳会阅读 660评论 0 1