Home > Developer > JavaScript
Sorry, it hasn't been updated for several days. There are a lot of things to be busy, fast New year. But it's going to go back.
Updated.
Now, let's say the Window object.
The Window object is the core of the BOM, and the Window object refers to the current browser window.
In JavaScript, we can execute code after a set interval, not when the function is tuned
Executed immediately after use.
Timer Type:
One-time timer: Fires only once after a specified delay.
Interval Trigger timer: Fires once every time interval is specified.
Timer method:
Method description
SetTimeout () executes code after the specified delay time
Cleartimeout () Cancel settimeout () setting
SETINTERVL () executes code every specified time
Clearinterval () Cancel setinterval () setting
Let's start with the timer. SetInterval () The code executes at the specified time after loading the page.
Code.
Grammar:
SetInterval (Code, interaction time);
Parameter description:
1. Code: The function to invoke or the code string to execute.
2. Interaction time: The interval between periodic execution or invocation of an expression, in milliseconds (1s=1000ms)
return value:
A value that is passed to clearinterval () to suppress periodic execution of "code."
Call the function format (assuming there is a clock () function):
SetInterval ("clock ()", 1000) or setinterval (clock,1000)
Let's set a timer to call the clock () function every 100 milliseconds and display the time as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<title> Timers </title>
<script type= "Text/javascript" >
var Int=setintervale (clock,100)
function Clock () {
var time=new Date ();
document.getElementById ("Clock"). Value=time;
}
</script>
<body>
<form>
<input type= "text" id= "clock" size= ">"
</form>
</body>
Since there is a timer set, there is a cancellation timer. Cancel Timer is clearinterval ()
The Clearinterval () method cancels the interaction time set by SetInterval ().
Grammar:
Clearinterval (Id_of_setinterval)
Parameter description:
Id_of_setinterval: The ID value returned by setinterval ().
The clock () function is called every 100 milliseconds and the time is displayed. When the button is clicked, the stop time, the code is as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Timers </title>
<script type= "Text/javascript" >
function Clock () {
var time=new Date ();
document.getElementById ("Clock"). Value = time;
}
Call the clock function every 100 milliseconds and assign the value of the return value to I
var i=setinterval ("Clock ()", 100);
</script>
<body>
<form>
<input type= "text" id= "clock" size= "/>"
<input type= "button" value= "Stop" onclick= "clearinterval (i)"/>
</form>
</body>
Just the SetInterval () is an immediate effect, now say settimeout () timer, it is in the load
After the specified time is deferred, the expression is executed once.
Grammar:
SetTimeout (code, delay time);
Parameter description:
1. The function to invoke or the code string to execute.
2. Delay time: The amount of time to wait before executing the code, in milliseconds (1s=1000ms)
When we open the page 3 seconds hu, in the popup a prompt box, the code is as follows:
<! DOCTYPE html>
<script type= "Text/javascript" >
SetTimeout ("alert (' hello! ')", 3000)
</script>
<body>
</body>
When the button start is clicked, SetTimeout () invokes the function, which pops up a prompt box after 5 seconds.
<! DOCTYPE html>
<script type= "Text/javascript" >
function Tinfo () {
var t=settimeout ("Alert (' hello! ')", 5000)
}
</script>
<body>
<form>
<input type= "button" value= "Start" onclick= "Tinfo ()" >
</form>
</body>
To create a counter that runs in an infinite loop, we need to write a function to call itself. In
The following code, when the button is clicked, the input field is counted starting at 0.
<! DOCTYPE html>
<script type= "Text/javascript" >
var num=0;
function Numcont () {
document.getElementById (' txt '). Value=num;
num=num+1;
SetTimeout ("Numcont ()", 1000);
}
</script>
<body>
<form>
<input type= "text" id= "txt"/>
<input type= "button" value= "Start" onclick= "Numcont ()" >
</form>
</body>
SetTimeout () and cleartimeout () are used together to stop the timer.
Grammar:
Cleartimeout (Id_of_settimeout)
Parameter description:
Id_of_settimeout: The ID value returned by setTimeout (). This value identifies the deferred execution code block to be canceled.
The following example is similar to the example of an infinite loop above. The only difference is that now we add a "Stop"
button to stop this counter:
<! DOCTYPE html>
<script type= "Text/javascript" >
var num=0,i;
Here is the meaning of Var num=0; var i;
function Timedcount () {
document.getElementById (' txt '). Value=num;
num=num+1;
I=settimeout (timedcount,1000);
}
SetTimeout (timedcount,1000);
function Stopcount () {
Cleartimeout (i);
}
</script>
<body>
<form>
<input type= "text" id= "TXT" >
<input type= "button" value= "Stop" onclick= "Stopcount ()" >
</form>
</body>
The History Object records the page (URL) that the user has visited and can implement the browser forward and backward
Navigation-like functionality.
Note: Start recording from the moment the window is opened, each browser window, every tab, and even the entire box
Have their own history object associated with a particular window object.
Grammar:
Window.history. [Properties | method]
Note: window can be omitted
History Object Properties:
Property Description
Length returns the number of URLs in the browser history list
History Object Method:
Method description
Back () load the previous URL in the history list
Forward () load the next URL in the history list
Go () Load a specific page in the history list
Using the Length property, the total browser history length of the current window, the code is as follows:
<script type= "Text/javascript" >
var hl=window.history.length;
document.write (HL);
</script>
Back () method to load the previous URL in the history list
Grammar:
Window.history.back ();
For example, to return to the previous page of the browse, the code is as follows:
Window.history.back ();
Note: The reverse button is equivalent to clicking the browser.
Back () equivalent to go (-1), the code is as follows:
Window.history.go (-1)
JavaScript Advanced (vii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
