Home > Developer > JavaScript
The Window object is the core of the BOM, and the Window object refers to the current browser window!
<! DOCTYPE html><html><head><meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "><title>Window object</title><script type="Text/javascript"> function mysty(){alert ("Welcome to Baidu Window") window.open ("http:// www.baidu.com/"," _blank "," width=600 "," height=400 ");}</script></head><body><form><input type="button" value="Click me, open New Window" onclick=" Mysty () " /></form></body></html>**
JavaScript Timers**
In JavaScript, we can execute code after a set interval, not
Executes immediately after the function is called.
Timer Type:
One-time timer: Fires only once after a specified delay.
Interval Trigger timer: Fires once every time interval is specified.
Timer Method:
SetTimeout () executes code after the specified delay time
Cleartimeout () Cancel settimeout () setting
SetInterval () executes code every specified time
Clearinterval () Cancel setinterval () setting
SetInterval ()
Executes the code at the specified time after the page is loaded.
Syntax:
SetInterval (Code, interaction time);
Code: the function to invoke or the code string to execute.
Interaction time: The time interval between periodic execution or invocation of an expression, measured in milliseconds;
return Value:
A value that can be 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,100);
Display the time settings on the browser:
<! DOCTYPE html><html><head><meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "><title>Timer</title><script type="Text/javascript"> var int=setinterval (Clock, +) function clock(){var time=New Date(); document.getElementById ("Clock"). Value = time; } </script></head><body> <form> <input type="text" id="Clock" size=" > </form></body></html>Cancel Timer clearinterval ()
The Clearinterval () method cancels the interaction time set by SetInterval ().
Syntax:
Clearinterval (Id_of_setinterval);
Parameters:
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, stop
Time, the code is as follows:
<! DOCTYPE html><html><head><meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "><title>Timer</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 return value to the Ivar i=setinterval ("clock ()"); </script></head><body> <form> <input type="text" id="Clock" size=" > <input type="button" value="Stop" onclick= "Clearinterval (i)" /> </form></body></html>Timer settimeout ()
SetTimeout () timer, after loading the deferred execution time, to execute an expression,
Executes only once.
Syntax:
SetTimeout (code, delay time);
parameter Description:
Code: The function to invoke or the code string to execute.
Delay time: The amount of time, in milliseconds, to wait before executing the code.
When the page opens for 3 seconds, a prompt box pops up with the following code:
<!DOCTYPE HTML><html><head><script type="text/javascript">setTimeout("alert(‘Hello!‘)",3000);</script></head></html>
When the button start is clicked, the SetTimeout () call function, which pops up after 5 seconds
Display box.
<! DOCTYPE html><html><head><script type="Text/javascript"> function tinfo(){var t = setTimeout ("alert (' hello! ')" ,);}</script></head><body><form><input type="button" value="Start" onClick=" Tinfo () "></form></body></html>To create a counter that runs in an infinite loop, we need to write a function to tune
With its own. In the following code, when the button is clicked, the input field is counted starting from 0
。
<! DOCTYPE html><html><head><script type="Text/javascript"> var num=0; function numcount(){document.getElementById (' txt '). value= num;num=num+1; SetTimeout ("Numcount ()",+);} </script></head><body><input type="text" id="txt" /><input type="button" value="Start" onClick ="Numcount ()" /></body></html>Cancel Timer cleartimeout ()
SetTimeout () and cleartimeout () are used together to stop the timer.
Syntax:
Cleartimeout (id_of_settimeout);
parameter Description:
Id_of_settimeout: The ID value returned by setTimeout (). This value identifies the delay to be canceled
Executes a code block.
<! DOCTYPE html><html><head><script type="Text/javascript"> var num=0, I; function timedcount(){document.getElementById (' txt '). Value=num;num =num+1; I=settimeout (Timedcount,+);} SetTimeout (Timecount,+); function stopcount(){cleartimeout (i);}</script></head><body><form ><input type="text" id="txt"><input type="button" value="Stop" onClick= "Stopcount ()"></form></body></html>The history object records the pages (URLs) that the user has visited, and allows them to browse
The function of similar navigation between the forward and backward of the device.
Note: Start recording from the moment the window is opened, each browser window, each tab
page, or even each frame, has its own history object associated with a particular window object.
Grammar:
Window.history. [Properties | method]
window can be omitted.
History Object Properties:
Length returns the number of URLs in the browser history list.
History Object method:
Back () Loads the previous URL in the History list.
Forward () loads the next URL in the History list.
Go () Loads a specific page in the History list.
Using the Length property, output the total browsing history length of the current window with the following code:
<script type="text/javascript">var HL = window.history.length;document.write(HL);</script>
return to previous browsed page
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);
return to the next browsed page
Forward () method to load the next URL in the History list.
If you want to go back to the page you browsed before going backwards, you can forward ()
Law, the code is as follows:
Window.history.forward ();
= = Window.history.go (1);
back to other pages in browsing history
Go () method to load a specific page in the History list, depending on the page currently in place
Surface.
Syntax:
Window.history.go (number);
Parameters:
1 Previous, go (1) = = Forward ();
0 Current Page
-1 after one, go ( -1) = =back ()
Other values the relative position of the URL to access in the history's URL list
。
Location is used to get or set the URL of the form and can be used to resolve URLs.
Syntax:
Location. [Properties | method]
Location Object properties:
Hash sets or returns the URL starting with #.
Host sets or returns the hostname and port number of the current URL.
Hostname Sets or returns the host name of the current URL.
HREF Sets or returns the full URL
Pathname Sets or returns the path portion of the current URL
Port Sets or returns the port number of the current URL.
Protocol sets or returns the protocol for the current URL.
Search settings or return from? The Start URL (query section).
Location Object method:
Assign () loading a new document
Reload () reloads the current document.
Replace () replaces the current document with a new document
<! DOCTYPE html><html><head><meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "><title>Location</title></head> <script type="Text/javascript">document.write (window.location.href);</script></head><body></body></html>Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
javascript--windows--basic function (i)
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
