利用JS實現瀏覽器的title閃爍

2019-11-20 22:33:38

字體：大中小

來源：轉載

供稿：網友

主要是通過setTimeout方法設置一個定時器，切換消息提示，從而達title到消息提示的閃爍。

<html>  
<head>  
    <title>JS效果-瀏覽器標題欄閃爍</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <script type="text/javascript">  
        // 使用message對象封裝消息  
        var message = {  
            time: 0,  
            title: document.title,  
            timer: null,  
            // 顯示新消息提示  
            show: function () {  
                var title = message.title.replace("【　　　】", "").replace("【新消息】", "");  
                // 定時器，設置消息切換頻率閃爍效果就此產生  
                message.timer = setTimeout(function () {  
                    message.time++;  
                    message.show();  
                    if (message.time % 2 == 0) {  
                        document.title = "【新消息】" + title  
                    }  

                    else {  
                        document.title = "【　　　】" + title  
                    };  
                }, 600);  
                return [message.timer, message.title];  
            },  
            // 取消新消息提示  
            clear: function () {  
                clearTimeout(message.timer);  
                document.title = message.title;  
            }  
        };  
        message.show();  
        // 頁面加載時綁定點擊事件，單擊取消閃爍提示  
        function bind() {  
            document.onclick = function () {  
                message.clear();  
            };  
        }  
    </script>  
</head>  
<body>  
    點擊頁面取消消息閃爍提示  
</body>  
</html>