How to implement new message prompt in jquery-JS Tutorial-php.cn

How to implement new message prompt in jquery

藏色散人

Release： 2021-11-19 11:06:48

Original

2633 people have browsed it

Jquery method to implement new message prompts: 1. Create an HTML sample file; 2. Add script tags; 3. Pass "blinkTitle: { show: function() { var step =...}" method can be used to implement new message prompts.

How to implement new message prompt in jquery

The operating environment of this tutorial: windows7 system, jquery- Version 2.0.3, Dell G3 computer.

How to implement new message prompts with jquery?

jQuery implements new message flashing prompts in the webpage title

This This article mainly introduces the relevant information about how jQuery implements new message flashing prompts in web page titles. Friends who need it can refer to

. Some webmasters may notice this effect, which is what we do in some SNS social networking and communities. When browsing the forum, we often see that the title of the new message received will flash. So can we apply this effect to our own website? How to achieve the effect of flashing the title of the new message on the web page? The editor is fortunate to work with a certain awesome person Technology blogs saw such code, based on the jquery framework.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP &#39;test.jsp&#39; starting page</title> 
</head> 
<body> 
<p style="text-align: center;"> 
请看网页标题处效果！ 
<br /> 
隔10秒后提示消失 
</p> 
<script type="text/javascript"
src="script/jquery-2.0.3.js"> 
</script> 
<script type="text/javascript"> 
  
(function($) { 
$.extend( { 
/** 
* 调用方法： var timerArr = $.blinkTitle.show(); 
* $.blinkTitle.clear(timerArr); 
*/
blinkTitle : { 
show : function() { //有新消息时在title处闪烁提示 
var step = 0, _title = document.title; 
var timer = setInterval(function() { 
step++; 
if (step == 3) { 
step = 1 
} 
  
if (step == 1) { 
document.title = &#39;【　　　】&#39; + _title 
} 
  
if (step == 2) { 
document.title = &#39;【新消息】&#39; + _title 
} 
  
}, 500); 
return [ timer, _title ]; 
}, 
/** 
* @param timerArr[0], timer标记 
* @param timerArr[1], 初始的title文本内容 
*/
clear : function(timerArr) { //去除闪烁提示，恢复初始title文本 
if (timerArr) { 
clearInterval(timerArr[0]); 
document.title = timerArr[1]; 
} 
  
} 
} 
}); 
})(jQuery); 
jQuery(function($) { 
var timerArr = $.blinkTitle.show(); 
setTimeout(function() { //此处是过一定时间后自动消失 
$.blinkTitle.clear(timerArr); 
}, 10000); 
//若认为操作消失，只需如此调用： $.blinkTitle.clear(timerArr); 
}); 
</script> 
<br /> 
</body> 
</html>

Copy after login

Recommended learning: "jquery video tutorial"

The above is the detailed content of How to implement new message prompt in jquery. For more information, please follow other related articles on the PHP Chinese website!