您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

一个网页标题title的闪动提示效果实现思路

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 通过网页title来提示用户有新消息这个功能很常见,下面有个不错的示例,大家可以参考下

通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见。如何实现则个功能呢?    思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ,并与空格来回切换。例:【你有新消息】与【     】切换。提示内容弄是动态的,所以替换文字的空格数目也是算出的。这里用全角的空格。但是如果提示消息中有‘数字'等半角字符的话就会出现问题。全角的空格比半角的1的宽度要宽的多。这样的话,闪动起来看着就不是很舒服;解决方法就是用全角的空格替换全角的字符,半角的空格替换半角的字符。  但是document.title=' ';不论半角空格有多少个,浏览器只显示一个。用 的话,它原样输出;只能用var t=document.getElementsByTagName('title')[0]。获取title dom对象,通过 t.innerHTML=' '来修改。    但会这么顺利么,当然不会。我们可爱的ie在这个时候总会出来捣乱。在ie浏览器下title的innerHTML是只读的(不光是title,其它的如:COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR的innerHTML属性是只读的)。如果强制赋值的话会出现“未知的运行时错误”。目前我也没有找到很到的办法,只能加上try{}catch(e){}对它进行特殊处理了  分享下源代码:     代码如下: <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>    火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。