Maison > interface Web > js tutoriel > le corps du texte

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

黄舟
Libérer: 2017-12-04 10:24:43
original
1971 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!