Maison >interface Web >js tutoriel >L'utilisation de js timer (explication avec exemples)
L'utilisation de js timer (explication avec exemples)
- 高洛峰original
- 2017-02-08 16:21:531538parcourir
Cet article présente principalement comment utiliser les timers en js. Les amis dans le besoin peuvent venir ici pour référence, j'espère que cela sera utile à tout le monde
En javascript, il existe deux fonctions spéciales pour les minuteries, qui sont :
1. setTimeout("function();",delaytime);
2. Loop timer: timename=setInterval("function();",delaytime);
Le premier paramètre "function( )" est le action à exécuter lorsque le timer est déclenché. Il peut s'agir d'une fonction ou de plusieurs fonctions. Les fonctions peuvent être séparées par ";". Par exemple, si vous souhaitez afficher deux fenêtres d'avertissement, vous pouvez remplacer "function();" par
"alert('Première fenêtre d'avertissement !'); alert('Deuxième fenêtre d'avertissement !');"; Le deuxième paramètre "delaytime" est le temps d'intervalle en millisecondes, c'est-à-dire que remplir "5000" signifie 5 secondes.
Le compte à rebours déclenche un événement après l'heure spécifiée, tandis que le minuteur en boucle déclenche l'événement à plusieurs reprises lorsque l'intervalle arrive. La différence entre les deux est que le premier ne fonctionne qu'une seule fois, tandis que le second fonctionne en continu.
Par exemple, après avoir ouvert une page et souhaité passer automatiquement à une autre page toutes les quelques secondes, vous devez utiliser le compte à rebours "setTimeout("function();",delaytime)", et si vous souhaitez définir une phrase pour qu'elle apparaisse un mot à la fois,
nécessite l'utilisation du minuteur de boucle "setInterval("function();",delaytime)".
Pour obtenir le focus du formulaire, document.activeElement.id est utilisé. Utilisez if pour déterminer si document.activeElement.id et l'ID du formulaire sont identiques.
Par exemple : if ("mid" == document.activeElement.id) {alert();}, "mid" est l'ID correspondant au formulaire.
Timer :
est utilisé pour spécifier un programme à exécuter après une période de temps spécifique.
Exécution du timing en JS, la différence entre setTimeout et setInterval et la méthode d'annulation
setTimeout(Expression, DelayTime), après DelayTime, l'expression sera exécutée une fois, setTimeout est utilisé pour retarder une période de temps, refaites quelque chose.
setTimeout("function", time) définit un objet timeout
setInterval(expression, delayTime). Chaque DelayTime exécutera Expression. Il peut souvent être utilisé pour actualiser les expressions
setInterval(" fonction. ", time) Définissez un objet timeout
SetInterval pour qu'il se répète automatiquement, setTimeout ne se répétera pas.
clearTimeout(object) efface l'objet setTimeout
clearInterval(object) efface l'objet setInterval
Juste deux exemples.
Exemple 1. Lorsque le formulaire est déclenché ou chargé, affichez la chaîne textuellement
Copiez le code Le code est la suivante :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var str = "这个是测试用的范例文字";
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {
msg = str.substring(0, seq+1);
document.getElementByIdx_x_x('word').innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<p id="word"></p><br/><br/>
</body>
</html>Exemple 2. Lorsque le focus est sur la zone de saisie, vérifiez régulièrement les informations de la zone de saisie et n'effectuez pas l'action de vérification lorsque le focus n'est pas activé.
Copier le code Le code est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var second=5000; //间隔时间5秒钟
var c=0;
function scroll() {
c++;
if ("b" == document.activeElement.id) {
var str="定时检查第<b> "+c+" </b>次<br/>";
if(document.getElementByIdx_x_x('b').value!=""){
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
}
document.getElementByIdx_x_x('word').innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
<p id="word"></p><br/><br/>
</body>
</html>Exemple 3. Ce qui suit est l'exemple le plus simple. Un avertissement apparaît après. l'heure de la minuterie est atteinte.
Copier le code Le code est le suivant :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
function count() {
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
setTimeout("alert('十秒钟到！')",10000)
}
</script>
<body>
<p id="m"></p>
<input TYPE="button" value=" 计时开始" onclick="count()">
</body>
</html>Exemple 4 : Saut dans le temps du compte à rebours
Copier le code Le code est le suivant :
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ds04.jsp' starting page</title>
<span id="tiao">3</span>
<a href="javascript:countDown"> </a>秒后自动跳转……
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
<!--脚本开始-->
<script language="javascript" type="">
function countDown(secs){
tiao.innerText=secs;
if(--secs>0)
setTimeout("countDown("+secs+")",1000);
}
countDown(3);
</script>
<!--脚本结束-->
</head>
Exemple 6 :
Copier le codeLe code est le suivant :
<head>
<meta http-equiv="refresh" content="2;url='b.html'">
</head>Exemple 7 :
Copiez le codeLe code est le suivant :
<script language="javascript" type="text/javascript">
setTimeout("window.location.href='b.html'", 2000);
//下面两个都可以用
//setTimeout("javascript:location.href='b.html'", 2000);
//setTimeout("window.location='b.html'", 2000);
</script>Exemple 8 :
Copier le codeLe code est le suivant :
<span id="totalSecond">2</span>
<script language="javascript" type="text/javascript">
var second = document.getElementByIdx_x('totalSecond').innerHTML;
if(isNaN(second)){
//……不是数字的处理方法
}else{
setInterval(function(){
document.getElementByIdx_x('totalSecond').innerHTML = --second;
if (second <= 0) {
window.location = 'b.html';
}
}, 1000);
}
</script>js timer ( exécuter une fois, répéter)
Partagez une section de code js, un petit exemple de minuterie js, divisée en une minuterie exécutée une fois et une minuterie exécutée à plusieurs reprises. Pour référence pour les débutants.
1, un timer qui ne s'exécute qu'une seule fois
Copier le code Le code est le suivant :
<script>
//定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
</script>2 , exécuter à plusieurs reprises Le minuteur
Copier le code Le code est le suivant :
<script>
function hello(){
alert("hello");
}
//重复执行某个方法
var t1 = window.setInterval(hello,1000);
var t2 = window.setInterval("hello()",3000);
//去掉定时器的方法
window.clearInterval(t1);
</script>Remarque :
S'il y a sont deux sur une page. Les deux méthodes sont exécutées après le chargement de la page, mais elles ne sont en fait pas exécutées dans l'ordre. Vous pouvez vous référer aux méthodes suivantes pour résoudre le problème :
Vous pouvez ajouter une minuterie dans la méthode onload, définie. une minuterie et un "retard" pendant une période de temps. Si vous l'exécutez après l'heure, vous pouvez le considérer comme une distinction entre l'ordre de chargement des pages et les méthodes d'exécution.
Copier le code Le code est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
var YC = new Object();
function beginYC()
{
var secondsYC = document.getElementById("txtYCSeconds").value;
try
{
YC = setTimeout("alert('延迟"+secondsYC+"秒成功')",secondsYC*1000);
}
catch(e)
{
alert("请输入正确的秒数。");
}
}
function overYC()
{
clearTimeout(YC);
YC=null;
alert("终止延迟成功。");
}
/**************************↓↓↓↓定时器的使用↓↓↓↓********************************/
var timerDS = new Object();
var timerDDS = new Object();
function beginDS()
{
sn.innerHTML = "0";
timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
}
function goonDS()
{
timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
}
function overDS()
{
clearInterval(timerDS);
timerDS=null;
}
function delayDS()
{
overDS();
timerDDS = setTimeout("goonDS()",document.getElementById("txtDDSSeconds").value*1000);
}
function addOne()
{
if(sn.innerHTML=="10")
{
overDS();
alert("恭喜你，已成功达到10秒");
return;
}
sn.innerHTML=parseInt(sn.innerHTML,10)+1;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
延迟器的使用：</div>
<div>
<label id="Label2" title="延迟秒数："></label>
<input type="text" id="txtYCSeconds" value="3" />
<input type="button" id="btnBYC" onclick="javascript:beginYC()" value="开始延迟" />
<input type="button" id="btnOYC" onclick="javascript:overYC()" value="终止延迟" />
<input type="button" id="Button1" onclick="javascript:alert('good monrning');" value="普通弹窗" />
</div>
<br />
<div>
定时器的使用：</div>
<div>
<div id="sn">0</div>
<label id="Label1" title="定时间隔秒数："></label>
<input type="text" id="txtIntervalSeconds" value="1" />
<input type="button" id="btnBDS" onclick="javascript:beginDS()" value="启动定时" />
<input type="button" id="btnODS" onclick="javascript:overDS()" value="终止定时" />
<input type="button" id="btnGDS" onclick="javascript:goonDS()" value="继续定时" />
<label id="ds" title="延迟秒数："></label>
<input type="text" id="txtDDSSeconds" value="5" />
<input type="button" id="btnDDS" onclick="javascript:delayDS()" value="延迟定时" />
</div>
</form>
</body>
</html>更多js定时器的使用(实例讲解)相关文章请关注PHP中文网！
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript