jQuery implements a new message that flashes in the title of a web page
- 2020-06-19 09:46:56
- OfStack
There may be 1 webmaster will notice such an effect, is that we in some SNS social, community forum browsing, often see received new messages will flash title prompt, so we can use this effect in their own website, new messages in the title flashing effect how to achieve? This site is lucky to see this code on some awesome technical blog, based on the jquery framework.
<!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;">
Please look at the page title 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( {
/**
* Call method: var timerArr = $.blinkTitle.show();
* $.blinkTitle.clear(timerArr);
*/
blinkTitle : {
show : function() { // When there is new information title Spot flashing prompt
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 = ' [News] ' + _title
}
}, 500);
return [ timer, _title ];
},
/**
* @param timerArr[0], timer tag
* @param timerArr[1], The initial title The text content
*/
clear : function(timerArr) { // Remove the flicker prompt and resume title The text
if (timerArr) {
clearInterval(timerArr[0]);
document.title = timerArr[1];
}
}
}
});
})(jQuery);
jQuery(function($) {
var timerArr = $.blinkTitle.show();
setTimeout(function() { // Here is a 1 It will disappear automatically after fixed time
$.blinkTitle.clear(timerArr);
}, 10000);
// If the operation is considered to be gone, simply call: $.blinkTitle.clear(timerArr);
});
</script>
<br />
</body>
</html>
This is the end of this article, I hope you enjoy it.