It is easy to use the time event in JavaScripP. The two key methods are:
settimeout ()
Execute code at a certain time
Cleartimeout ()
Cancel Settimeout ()
settimeout ()
grammar
Copy code code as follows:
var t = settimeout ("JavaScript statement", millisecond)
The settimeout () method returns a certain value. In the above statement, the value is stored in a variable called T. If you want to cancel this settimeout (), you can use this variable name to specify it.
The first parameter of the settimeout () is a string containing the JavaScript statement. This statement may be like "Alert ('5 Seconds!'), Or the call of the function, such as alertmsg ()".
The second parameter indicates the first parameter after the current milliseconds start.
Tip: 1000 milliseconds are equal to one second.
When the button in the following example is clicked, a prompt box will pop up in 5 seconds.
Copy code code as follows:
<html>
<head>
<script type = "text/javascript">
Function TimedMSG ()
{{
var T = Settimeout ("Alert ('5 Seconds!')", 5000)
}
</script>
</head>
<body>
<FORM>
<input type = "Button" Value = "Display Timed Alertbox!" Onclight = "Timedmsg ()">
</form>
</body>
</html>
Example- infinite cycle
To create a timer running in an infinite loop, we need to write a function to call itself. In the following example, when the button is clicked, the input domain is counted from 0.
Copy code code as follows:
<html>
<head>
<script type = "text/javascript">
var C = 0
var T
Function TimedCount ()
{{
document.GetelementByid ('txt'). Value = C
C = C+1
t = Settimeout ("Timedcount ()", 1000)
}
</script>
</head>
<body>
<FORM>
<input type = "Button" Value = "Start Count!" OnClick = "Timedcount ()">
<input type = "text" id = "txt">
</form>
</body>
</html>
Cleartimeout ()
grammar
Copy code code as follows:
Cleartimeout (settimeout_variable)
Instance
The example below is similar to the example of the infinite loop above. The only difference is that now we have added a "Stop Count!" Button to stop this counter:
Copy code code as follows:
<html>
<head>
<script type = "text/javascript">
var C = 0
var T
Function TimedCount ()
{{
document.GetelementByid ('txt'). Value = C
C = C+1
t = Settimeout ("Timedcount ()", 1000)
}
Function StopCount ()
{{
Cleartimeout (t)
}
</script>
</head>
<body>
<FORM>
<input type = "Button" Value = "Start Count!" OnClick = "Timedcount ()">
<input type = "text" id = "txt">
<input type = "Button" Value = "Stop Count!" OnClick = "StopCount ()">
</form>
</body>
</html>
The other two important methods:
Copy code code as follows:
Setinterval ()
SetInterval () -Executes A Function, Over and Over Again, Atcified Time Intervals
The function is: the cycle executes a method, within the specified interval time
grammar:
Copy code code as follows:
Window.SetInterval ("JavaScript Function", MilliseConds);
Note: The first parameter must be a function, and the second parameter is the interval time of the execution function.
Example:
Copy code code as follows:
<html>
<script type = "text/javascript">
setInterval (function () {alert ("Hello")}, 500);
</script>
</html>
Note: The above example, the execution effect means that every 500ms is alert ("Hello");
One more clock:
Copy code code as follows:
<html>
<body>
<p ID = "demo"> </p>
<script type = "text/javascript">
setInterval (function () {mytimer ()}, 1000);
function mytimer () {
var d = new date ();
var t = d.tolocaletimestring ();
document.GetelementByid ('Demo'). Innerhtml = t;
}
</script>
</body>
</html>
How to stop, setInterval () method ??
Copy code code as follows:
Window.Clearinterval ()
grammar:
Copy code code as follows:
Window.Clearinterval (intervalvariable)
Copy code code as follows:
The window.clearinterval () method can be written with the window prefix.
To be able to use the clearinterval () method, you must use a global variable when creating the interval method:
Myvar = SetInterval ("JavaScript Function", MilliseConds);
THEN You will be able to stop the execution by calling the clearInterval () method.
Example:
Copy code code as follows:
<html>
<body>
<p ID = "demo"> </p>
<p ID = "demo2" onClight = "STOP ()"> STOP </p>
<script type = "text/javascript">
var test = setInterval (function () {mytimer ()}, 1000);
function mytimer () {
var d = new date ();
var t = d.tolocaletimestring ();
document.GetelementByid ('Demo'). Innerhtml = t;
}
Function Stop () {
<html>
<body>
<p ID = "demo"> </p>
<p ID = "demo2" onClight = "STOP ()"> STOP </p>
<script type = "text/javascript">
var test = setInterval (function () {mytimer ()}, 1000);
function mytimer () {
var d = new date ();
var t = d.tolocaletimestring ();
document.GetelementByid ('Demo'). Innerhtml = t;
}
Function Stop () {
Clearinterval (Temp);
}
</script>
</body>
</html>
}
</script>
</body>
</html>