js實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示效果實(shí)例分析

字號(hào):


    網(wǎng)頁標(biāo)題欄閃爍效果我們?cè)谝恍┝奶旃ぞ邥?huì)??吹剑瘳F(xiàn)在流量的聊天室,下面我們就來給大家總結(jié)一款實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示代碼,感興趣可參考一下。
    公司的項(xiàng)目中用到了這個(gè)新消息提示的效果,主要用于提示用戶有新消息。具體實(shí)現(xiàn)代碼如下:
    代碼如下:
    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操作
    }
    };
    調(diào)用顯示新消息提示:newMessageRemind.show();
    調(diào)用取消新消息提示:newMessageRemind.clear();
    看了上面代碼自己再進(jìn)行優(yōu)化一下,不管怎樣,自己能吸收學(xué)習(xí)到就好了。:)我主要是覺得他代碼里面 newMessageRemind 這字段用得太多了,看起來密密麻麻的,多不舒服啊,想著換一種小清新的方式展現(xiàn)出來,于是乎就有了下面的代碼:
    代碼如下:
    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;
    }
    };
    } ();
    是不是清新了很多呢?^_^
    代碼如下:
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>放假啦?。?!</title>
    </head>
    <body>
    <button id="test">stop</button>
    <script type="text/javascript">
    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;
    }
    };
    } ();
    newMessageRemind.show();
    document.getElementById('test').onclick = function () {
    newMessageRemind.stop();
    };
    </script>
    </body>
    </html>