L'utilisation de js timer (explication avec exemples)-js tutoriel-php.cn

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(&#39;word&#39;).innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval(&#39;scroll()&#39;,second)">
<p id="word"></p><br/><br/>
</body>
</html>

Copier après la connexion

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(&#39;b&#39;).value!=""){
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x(&#39;b&#39;).value+"</b>";
}
document.getElementByIdx_x_x(&#39;word&#39;).innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval(&#39;scroll()&#39;,second)"></textarea><br/><br/>
<p id="word"></p><br/><br/>
</body>
</html>

Copier après la connexion

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(&#39;m&#39;).innerHTML="计时已经开始！";
setTimeout("alert(&#39;十秒钟到！&#39;)",10000)
}
</script>
<body>
<p id="m"></p>
<input TYPE="button" value=" 计时开始" onclick="count()">
</body>
</html>

Copier après la connexion

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 &#39;ds04.jsp&#39; starting page</title>
  <span id="tiao">3</span>
  <a href="javascript:countDown"> </a>秒后自动跳转……
  <meta http-equiv=refresh content=3;url= &#39;/ds02.jsp&#39;/>
  <!--脚本开始-->
  <script language="javascript" type="">
function countDown(secs){
 tiao.innerText=secs;
 if(--secs>0)
  setTimeout("countDown("+secs+")",1000);
 }
 countDown(3);
 </script>
  <!--脚本结束-->
 </head>

Copier après la connexion

Exemple 6 :

Copier le codeLe code est le suivant :

<head> 
    <meta http-equiv="refresh" content="2;url=&#39;b.html&#39;"> 
</head>

Copier après la connexion

Exemple 7 :

Copiez le codeLe code est le suivant :

<script language="javascript" type="text/javascript">
 setTimeout("window.location.href=&#39;b.html&#39;", 2000);
 //下面两个都可以用
 //setTimeout("javascript:location.href=&#39;b.html&#39;", 2000);
 //setTimeout("window.location=&#39;b.html&#39;", 2000);
</script>

Copier après la connexion

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(&#39;totalSecond&#39;).innerHTML;
 if(isNaN(second)){
  //……不是数字的处理方法
 }else{
  setInterval(function(){
   document.getElementByIdx_x(&#39;totalSecond&#39;).innerHTML = --second;
   if (second <= 0) {
    window.location = &#39;b.html&#39;;
   }
  }, 1000);
 } 
</script>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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(&#39;延迟"+secondsYC+"秒成功&#39;)",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(&#39;good monrning&#39;);" 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>

Copier après la connexion

更多js定时器的使用(实例讲解)相关文章请关注PHP中文网！