js implementation of web page title bar flashing prompt effect example analysis

js implementation of web page title bar flashing prompt effect example analysis_javascript skills

WBOY

Release： 2016-05-16 16:31:02

Original

1408 people have browsed it

The example in this article describes how to use js to achieve the flashing prompt effect of the title bar of a web page. Share it with everyone for your reference. The specific analysis is as follows:

We often see the flashing effect of the webpage title bar in some chat tools, such as the current high-traffic chat rooms. Below we will summarize a code for realizing the flashing prompt of the webpage title bar. If you are interested, you can refer to it.

This new message prompt effect is used in the company’s projects, and is mainly used to remind users that there are new messages. The specific implementation code is as follows:

Copy code The code is as follows:

var newMessageRemind={

_step: 0,

_title: document.title,

_timer: null,

//Display new message prompt

show:function(){

var temps = newMessageRemind._title.replace("【　　】", "").replace("【New Message】", "");

newMessageRemind._timer = setTimeout(function() {

newMessageRemind.show();

//Write Cookie operation here

newMessageRemind._step ;

if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };

if (newMessageRemind._step == 1) { document.title = "【　　】" temps };

if (newMessageRemind._step == 2) { document.title = "[New Message]" temps };

}, 800);

return [newMessageRemind._timer, newMessageRemind._title];

},

//Cancel new message prompt

clear: function(){

clearTimeout(newMessageRemind._timer);

document.title = newMessageRemind._title;

//Write Cookie operation here

}

};

Call to display new message reminder: newMessageRemind.show();
Call to cancel new message reminder: newMessageRemind.clear();
After reading the above code, I will optimize it myself. No matter what, it will be good if I can absorb and learn it. :) I mainly felt that the newMessageRemind field in his code was used too much, and it looked dense and uncomfortable. I wanted to show it in a fresh way, so I came up with the following code:

Copy code The code is as follows:

var newMessageRemind = function () { 

var i = 0, 

         title = document.title, 

         loop; 

Return { 

show: function () { 

             loop = setInterval(function () { 

i ; 

If ( i == 1 ) document.title = '[New News]' title; 

If ( i == 2 ) document.title = '【　】' title; 

If ( i == 3 ) i = 0; 

             }, 800); 

         }, 

Stop: function () { 

                                                                                                           ,,,,,,,,,,,,,,
                 document.title = title; 

          } 

}; 

} ();

Isn’t it a lot fresher? ^_^

Copy code The code is as follows:

放假啦！！！

希望本文所述对大家的javascript程序设计有所帮助。