Js Implementation of Web page title bar flashing result instance analysis
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:
<! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> holiday !!! </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 = '[NEW MESSAGE]' + 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>