Explication détaillée de l'utilisation de setTimeout() en JavaScript-js tutoriel-php.cn

Explication détaillée de l'utilisation de setTimeout() en JavaScript

黄舟

Libérer： 2017-12-04 10:24:43

original

2028 Les gens l'ont consulté

La méthode setTimeout en JavaScript est largement utilisée. Elle est généralement utilisée lors de l'actualisation de la page, d'une exécution retardée, etc. Cependant, de nombreux novices en JavaScript ne savent toujours pas grand-chose sur l'utilisation de setTimeout. Aujourd'hui, je vais vous présenter JavaScript. Explication détaillée de l'utilisation de setTimeout() !

Utilisation de setTimeout

Exécutons un cas ensemble. Ouvrez d'abord le Bloc-notes, collez-y le code suivant et exécutez l'effet !

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范网页 </font> </h1>
<p> 请等三秒!</p>

<script>
setTimeout("alert(&#39;对不起, haorooms博客要你等候多时&#39;)", 3000 )
</script>

</body> 
</html>

Copier après la connexion

La page affichera un cadre photo après y être restée trois secondes ! Ce cas utilise la syntaxe la plus basique de setTimeout, et setTimeout ne sera pas automatiquement répété !

setTimeout peut également exécuter des fonctions, et il peut être exécuté à plusieurs reprises ! Réalisons un autre cas ensemble :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
   x = x+1
　 document.haorooms.haoroomsinput.value=x
　 setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>

Copier après la connexion

Vous pouvez voir que le nombre dans la zone de texte de saisie augmente chaque seconde ! Par conséquent, setTimeout peut également effectuer des sauts temporels dans les pages Web !

Sans cas, l'apprentissage ne sera pas rapide. Faisons ensemble un autre exemple pour calculer le temps que vous restez sur une certaine page de haorooms :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin()",60000)
}
function countSec()
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留时间是: </td>
<td> 
<form name=displayMin>
   <input type=text name=displayBox value=0 size=4 >
</form> 
</td>
<td> 分 </td>
<td> 
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
 </td>
<td> 秒。</td> </tr>
 </table>
<script>
countMin()
countSec()
</script>
</body>
</html>

Copier après la connexion

Que diriez-vous d'utiliser l'exemple ci-dessus ? , je pense que vous comprenez l'utilisation de setTimeout() !

Résumé :

Grâce à l'explication ci-dessus, je me demande si vous comprenez setTimeout et si vous serez très habile à utiliser setTimeout la prochaine fois . J'espère que cela vous aidera dans votre travail !

Recommandations associées :

instance setTimeout

Fonction setTimeout() en js

Explication détaillée des exemples d'utilisation de la fonction javascript setTimeout avec des paramètres

Parlons du modèle de boucle d'événements de setTimeout

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!