js實現的網頁標題閃動程式碼例項

antzone發表於2017-03-22
JS網頁

在很多網頁中具有這樣的效果，那就是網頁的標題具有閃動效果，這樣的效果在用作網頁新資訊提醒的功能中比較實用，因為對於使用者來說著非常的醒目，比靜態的提示效果要好很多，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>【新訊息提醒】-螞蟻部落</title>
<script type="text/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(); 
}
flashTitle("新訊息提醒");
</script> 
</head> 
<body> 
</body> 
</html>

相關文章