This article illustrates the method of JS to realize the effect of flashing the title bar of Web page. Share to everyone for your reference. The specific analysis is as follows:
Page title bar Flashing effect we will often see in some chat tools, like the current flow of chat room, below we will give you a summary of the implementation of the Web page title bar flashing hint code, interested can refer to.
The effect of this new message hint is used in the company's project, which is mainly used to prompt the user for new messages. The specific implementation code is as follows:
Copy Code code as follows:
var newmessageremind={
_step:0,
_title:document.title,
_timer:null,
Show new message Prompts
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
}
};
The call displays a new message prompt: Newmessageremind.show ();
Call cancels new message prompt: Newmessageremind.clear ();
Look at the above code to optimize their own again, anyway, they can absorb learning to be good. :) I mainly feel that his code inside Newmessageremind This field used too much, look dense, how uncomfortable ah, think of a small fresh way to show out, and then have the following code:
Copy Code code 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 a lot fresher? ^_^
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Holiday!!! </title>
<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>
I hope this article will help you with your JavaScript programming.
