Detaillierte Erläuterung der Verwendung von setTimeout() in JavaScript-js-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung von setTimeout() in JavaScript

黄舟

Freigeben： 2017-12-04 10:24:43

Original

2027 Leute haben es durchsucht

Die setTimeout-Methode in JavaScript ist weit verbreitet. Sie wird normalerweise verwendet, wenn die Seite aktualisiert wird, die Ausführung verzögert wird usw. Viele JavaScript-Neulinge wissen jedoch immer noch nicht viel über die Verwendung von setTimeout. Heute werde ich Ihnen JavaScript ausführlich erklären.

Verwendung von setTimeout

Lassen Sie uns gemeinsam einen Fall ausführen. Öffnen Sie zuerst Notepad, fügen Sie den folgenden Code ein und führen Sie den Effekt aus!

<!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>

Nach dem Login kopieren

Nach drei Sekunden Verweilen wird auf der Seite ein Bilderrahmen angezeigt! In diesem Fall wird die grundlegendste Syntax von setTimeout verwendet und setTimeout wird nicht automatisch wiederholt!

setTimeout kann auch Funktionen ausführen, und zwar wiederholt! Lassen Sie uns gemeinsam einen anderen Fall bearbeiten:

<!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>

Nach dem Login kopieren

Sie können sehen, dass sich die Zahl im Eingabetextfeld jede Sekunde erhöht! Deshalb kann setTimeout auch Zeitsprünge in Webseiten machen!

Ohne einen Fall wird das Lernen nicht schnell gehen. Lassen Sie uns gemeinsam ein weiteres Beispiel erstellen, um die Zeit zu berechnen, die Sie auf einer bestimmten Seite von haorooms verbringen:

<!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>

Nach dem Login kopieren

Wie wäre es mit dem obigen Beispiel? Ich glaube, Sie verstehen die Verwendung von setTimeout()!

Zusammenfassung:

Anhand der obigen Erklärung frage ich mich, ob Sie setTimeout verstehen und ob Sie setTimeout beim nächsten Mal sehr gut verwenden können . Ich hoffe, es hilft bei Ihrer Arbeit!

Verwandte Empfehlungen:

setTimeout-Instanz

setTimeout()-Funktion in js

Detaillierte Erläuterung von Anwendungsbeispielen der Javascript-Funktion setTimeout mit Parametern

Lassen Sie uns über das Ereignisschleifenmodell von setTimeout sprechen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von setTimeout() in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!