网页title标题的闪动效果
通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见。
1 显示信息数: 2 <input type="text" id="textMsgs"/> 3 <button title="开始闪动" onclick="flashTitle('您有' + document.getElementById('textMsgs').value + '条新信息');">开始闪动</button> 4 <button title="停止闪动" onclick="stopFlash();">停止闪动</button>
1 var flashTitlePlayer = { 2 start: function (msg) { 3 this.title = document.title; 4 if (!this.action) { 5 try { 6 this.element = document.getElementsByTagName('title')[0]; 7 this.element.innerHTML = this.title; 8 this.action = function (ttl) { 9 this.element.innerHTML = ttl; 10 }; 11 } catch (e) { 12 this.action = function (ttl) { 13 document.title = ttl; 14 } 15 delete this.element; 16 } 17 this.toggleTitle = function () { 18 this.action('【' + this.messages[this.index = this.index == 0 ? 1 : 0] + '】来到博客园!'); 19 }; 20 } 21 this.messages = [msg]; 22 var n = msg.length; 23 var s = ''; 24 if (this.element) { 25 var num = msg.match(/\w/g); 26 if (num != null) { 27 var n2 = num.length; 28 n -= n2; 29 while (n2 > 0) { 30 s += " "; 31 n2--; 32 } 33 } 34 } 35 while (n > 0) { 36 s += ' '; 37 n--; 38 }; 39 this.messages.push(s); 40 this.index = 0; 41 this.timer = setInterval(function () { 42 flashTitlePlayer.toggleTitle(); 43 }, 1000); 44 }, 45 stop: function () { 46 if (this.timer) { 47 clearInterval(this.timer); 48 this.action(this.title); 49 delete this.timer; 50 delete this.messages; 51 } 52 } 53 }; 54 function flashTitle(msg) { 55 flashTitlePlayer.start(msg); 56 } 57 function stopFlash() { 58 flashTitlePlayer.stop(); 59 }