Maison > Article > interface Web > Comment implémenter une nouvelle invite de message dans jquery
Comment implémenter une nouvelle invite de message dans jquery
- 藏色散人original
- 2021-11-19 11:06:482635parcourir
Comment implémenter de nouvelles invites de message avec jquery : 1. Créez un exemple de fichier HTML ; 2. Ajoutez des balises de script ; 3. Passez "blinkTitle : { show: function() { var step =...}" méthode pour implémenter de nouvelles invites de message.
L'environnement d'exploitation de ce tutoriel : système Windows7, version jquery-2.0.3, ordinateur Dell G3.
Comment jQuery implémente-t-il de nouvelles invites de message ?
jQuery implémente de nouvelles invites clignotantes de message sur les titres de pages Web
Cet article présente principalement jQuery pour implémenter de nouvelles invites clignotantes de message sur les titres de pages Web. Les amis qui en ont besoin peuvent s'y référer
. Il se peut que certains webmasters remarquent cet effet. Lorsque nous parcourons certains réseaux sociaux et forums communautaires SNS, nous voyons souvent des invites de titre clignotantes pour les nouveaux messages reçus. Pouvons-nous donc appliquer cet effet à notre propre site Web ? le titre d'une page web ? L'éditeur a eu la chance de voir un tel code sur le blog technologique d'un certain expert, basé sur le framework jquery
<!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;">
请看网页标题处效果！
<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 = '【 】' + _title
}
if (step == 2) {
document.title = '【新消息】' + _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>Apprentissage recommandé : "tutoriel vidéo jquery"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!