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('对不起, haorooms博客要你等候多时')", 3000 ) </script> </body> </html>
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>
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>
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 :
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!