首页 > 代码库 > 网页title标题的闪动效果
网页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 }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。