DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 一個網頁標題title的閃動提示效果實現思路
一個網頁標題title的閃動提示效果實現思路
編輯:JavaScript綜合知識     

 通過網頁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當提示消息中有一個或沒有半角字符時沒問題。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved