JS 實現瀏覽器標題欄閃動提示訊息
阿新 • • 發佈:2019-02-20
<!doctype html> <html> <head> <meta charset='utf-8'> <title></title> <style></style> </head> <body> <script type="text/javascript" language="javascript"> var flashTitlePlayer = { start: function (msg) { this.title = document.title; if (!this.action) { try { this.element = document.getElementsByTagName('title')[0]; this.element.innerHTML = this.title; this.action = function (ttl) { this.element.innerHTML = ttl; }; } catch (e) { this.action = function (ttl) { document.title = ttl; } delete this.element; } this.toggleTitle = function () { this.action('【' + this.messages[this.index = this.index == 0 ? 1 : 0] + '】歡迎訪問簡明現代魔法'); }; } this.messages = [msg]; var n = msg.length; var s = ''; if (this.element) { var num = msg.match(/\w/g); if (num != null) { var n2 = num.length; n -= n2; while (n2 > 0) { s += " "; n2--; } } } while (n > 0) { s += ' '; n--; }; this.messages.push(s); this.index = 0; this.timer = setInterval(function () { flashTitlePlayer.toggleTitle(); }, 1000); }, stop: function () { if (this.timer) { clearInterval(this.timer); this.action(this.title); delete this.timer; delete this.messages; } } }; function flashTitle(msg) { flashTitlePlayer.start(msg); } function stopFlash() { flashTitlePlayer.stop(); } </script> <input type='button' value='開始閃動' class='btn_1' onclick="flashTitle('您有5條訊息')" /> <input type='button' value='停止閃動' class='btn_1' onclick="stopFlash()" /> </body> </html>