js實作網頁標題列閃爍提示效果實例分析_javascript技巧

本文實例講述了js實作網頁標題列閃爍提示效果的方法。分享給大家供大家參考。具體分析如下：

網頁標題列閃爍效果我們在一些聊天工具會常看到，像現在流量的聊天室，下面我們就來給大家總結一款實現網頁標題列閃爍提示代碼，感興趣可參考一下。

公司的專案中用到了這個新訊息提示的效果，主要用來提示使用者有新訊息。具體實作程式碼如下：

複製程式碼 程式碼如下:

var newMessageRemind={
_step: 0,
_title: document.title,
_timer: null,
//顯示新訊息提示
show:function(){
var temps = newMessageRemind._title.replace("【　　　】", "").replace("【新訊息】", "");
newMessageRemind._timer = setTimeout(function() {
newMessageRemind.show();
//這裡寫Cookie操作
newMessageRemind._step ;
if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };
if (newMessageRemind._step == 1) { document.title = "【　　　】" temps };
if (newMessageRemind._step == 2) { document.title = "【新訊息】" temps };
}, 800);
return [newMessageRemind._timer, newMessageRemind._title];
},
//取消新訊息提示
clear: function(){
clearTimeout(newMessageRemind._timer );
document.title = newMessageRemind._title;
//這裡寫Cookie操作
}
};

呼叫顯示新訊息提示：newMessageRemind.show();
呼叫取消新訊息提示：newMessageRemind.clear();
看了上面程式碼自己再進行優化一下,不管怎樣，自己能吸收學習到就好了。 ：）我主要是覺得他代碼裡面newMessageRemind 這字段用得太多了，看起來密密麻麻的，多不舒服啊，想著換一種小清新的方式展現出來，於是乎就有了下面的代碼：

複製程式碼 程式碼如下:

var newMessageRemind = function () {
    var i = 0,
        title = document.title,
        loop;
 
    return {
        show: function () {
            loop = setInterval(function () {
                i ;
                if ( i == 1 ) document.title = '【新訊息】' title;
                if ( i == 2 ) document.title = '【　　　】' title;
                if ( i == 3 ) i = 0;
            }, 800);
        },
        stop: function () {
            clearInterval(loop);
            document.title = title;
        }
    };
} ();

是不是清新了很多呢？ ^_^

複製程式碼 程式碼如下:

頭>

停止按鈕>

var newMessageRemind = function () {
 var i = 0,
  標題 = 文檔.標題,
  循環；
 返回{
  顯示：函數 () {
   循環 = setInterval(function () {
    我;
    if ( i == 1 ) document.title = '【新訊息】' title;
    if ( i == 2 ) document.title = '【】' 標題;
    if ( i == 3 ) i = 0;
   }, 800);
  },
  停止：函數 () {
   清除間隔（循環）；
   document.title = 標題;
  }
 };
} ();
newMessageRemind.show();
document.getElementById('test').onclick = function () {
 newMessageRemind.stop();
};
腳本>
身體>

希望本文對大家介紹的javascript程式設計有幫助。