JQuery code that lets new messages flash in the page title

2020-03-26 23:06:42
OfStack

There may be some webmaster will notice such an effect, that is, we are in some SNS social networking, community forum browsing, often will see received new message will blink title prompt, so such an effect we can not be used in their own website, new message in the web page title flashing display effect how to achieve? This site is lucky to see such code on a great tech blog, based on the jquery framework.

In order to solve the problem that some web effects cannot be displayed after running (for example, jQuery needs to be refreshed), this site has specially added a web version demo.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'test.jsp' starting page</title> 
</head> 
<body> 
<p style="text-align: center;"> 
 See the page title in the effect!  
<br /> 
 every 10 The prompt disappears after seconds  
</p> 
<script type="text/javascript" 
src="script/jquery-2.0.3.js"> 
</script> 
<script type="text/javascript"> 

(function($) { 
$.extend( { 
 
blinkTitle : { 
show : function() { //A new message flashes in the title
var step = 0, _title = document.title; 
var timer = setInterval(function() { 
step++; 
if (step == 3) { 
step = 1 
} 

if (step == 1) { 
document.title = ' 【 】 ' + _title 
} 

if (step == 2) { 
document.title = ' [new news] ' + _title 
} 

}, 500); 
return [ timer, _title ]; 
}, 
 
clear : function(timerArr) { //Remove the flicker and restore the original title text
if (timerArr) { 
clearInterval(timerArr[0]); 
document.title = timerArr[1]; 
} 

} 
} 
}); 
})(jQuery); 
// Resources from //www.jb51.net/down 
jQuery(function($) { 
var timerArr = $.blinkTitle.show(); 
setTimeout(function() { //Here is after a certain period of time automatically disappeared
$.blinkTitle.clear(timerArr); 
}, 10000); 
//If you think the operation is gone, simply call: $.blinktitle. Clear (timerArr);
}); 
</script> 
<br /> 
<center> 
 If not, please press Ctrl+F5 Refresh this page for more web code:  
<a href='//www.jb51.net/' target='_blank'>//www.jb51.net/</a> 
</center> 
</body> 
</html>