This article mainly introduces how to implement the flashing effect of the webpage title bar in js, analyzes the common implementation methods on the Internet in the form of examples, and analyzes and improves the principles, finally, a specific application example is provided for your reference. If you need it, you can refer to the example in this article to describe how js achieves the effect of flashing the webpage title bar. Share it with you for your reference. The specific analysis is as follows:
We often see the flickering effect of the webpage title bar in some chat tools. For example, in the current traffic chat room, we will summarize the code for implementing the code for flashing the webpage title bar, for more information, see.
The results of this new message prompt are used in company projects to prompt users to have new messages. The specific implementation code is as follows:
The Code is as follows:
Var newMessageRemind = {
_ Step: 0,
_ Title: document. title,
_ Timer: null,
// Display the new message prompt
Show: function (){
Var temps = newMessageRemind. _ title. replace ("[]", ""). replace ("[new message ]","");
NewMessageRemind. _ timer = setTimeout (function (){
NewMessageRemind. show ();
// Write Cookie 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 the new message prompt
Clear: function (){
ClearTimeout (newMessageRemind. _ timer );
Document. title = newMessageRemind. _ title;
// Write Cookie here
}
};
The call displays the new message: newMessageRemind. show ();
Message about canceling call: newMessageRemind. clear ();
After reading the above code, I will optimize it myself. In any case, I can absorb and learn it. :) I think the newMessageRemind field in his code is used too much. It looks very complicated and uncomfortable. I want to display it in a small and fresh way, the following code is available:
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 MESSAGE]' + title;
If (I = 2) document. title = '[]' + title;
If (I = 3) I = 0;
},800 );
},
Stop: function (){
ClearInterval (loop );
Document. title = title;
}
};
}();
Is it fresh? Pai_^
The Code is as follows:
Holiday !!!
Stop