通過閃爍標題來實現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閱讀 173,466評論 25 708
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,981評論 19 139
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,251評論 4 61
  • 2017年9月20日 周三 天氣雨 昨天上午我再次看到了自己「特別希望得到別人認可和信任」的記憶,這也同時是媽媽從...
    crysatljingjing閱讀 185評論 0 0
  • 1.我不想成為別人心中的No1,只想成為自己心中的。 2.只要你有好的平臺,去做你的欲望就可以撐的起你的野心。 3...
    艷會閱讀 651評論 0 1