If you want to be a good java Architect, here → Le byte free open class (Tencent class)
If you need to follow more information, please click on the right side (remember the password: 66) → This is a no return road, there is a risk of baldness, please choose carefully!
BOM objects
The core object of BOM is window, which represents an instance of browser. Window object has dual roles. It is not only an interface to access browser window through JavaScript, but also a Global object specified by ECMAScript. This means that any object, variable and function defined in the web page takes window as its Global object, so it has access to parseInt() and other methods. If the page contains frames, each frame has its own window object and is saved in the frames collection. In the frames collection, you can access the corresponding window object through the numerical index (starting from 0, left to right, top to bottom) or the name of the frame.
Window object method
System dialog
The browser can call the system dialog box to display messages to the user through the alert(), confirm(), prompt() methods (actually the methods of the window object).
(1) Message box: alert, commonly used.
The alert() method is used to display a warning box with a specified message and an OK button.
(2) Input box: prompt, which returns the value in the prompt box.
The prompt() method is used to display a dialog box that prompts the user for input.
Parameters (optional):
First parameter: plain text to display in the dialog box.
Second parameter: default input text.
(3) Confirmation box: confirm, return true/false
The confirm() method is used to display a dialog box with the specified message and OK and Cancel buttons.<style type="text/css"> #aa{ border: 1px solid red; height: 100px; } </style> <body> <div id="aa"> This is a div </div> <button onclick="testAlert();">warning</button> <button onclick="testComfirm();">modify</button> <button onclick="testPrompt();">input</button> <script type="text/javascript"> // 1. Warning box function testAlert(){ alert('Warning box!!!'); } /* 2.Input box Return value: input content * */ function testPrompt(){ var item = prompt('Please enter age'); // item gets the input value // console.log(item) // alert(prompt('Please input age ', 18)); / / output the entered value } /* 3.Confirmation box Return value: boolean (true|false) * */ function testComfirm(){ var result = confirm('Do you really want to change it?'); if(result){ var ele = document.getElementById("aa"); ele.style.color="red"; ele.innerHTML="<span>fdsfsd</span>"; }else{ alert("Don't be blind..."); } } </script> </body>
open windows
window.open The () method can be used to navigate to a specific URL or to open a new window
<script type="text/javascript"> function openBaidu(){ window.open('http://www.baidu.com','_self'); // _self,_ blank, etc // window.open(); / / blank window } </script> <input type="button" name="open" value="Baidu" onclick='openBaidu();' />
close window
window.close(): close window.
Example: click the button to close the current window.
<input type="button" value="close window" onclick="window.close();" />
Time function
setTimeout()
setTimeout(): call a function or compute an expression after the specified millisecond count. Returns a unique ID; you can also clear the execution of a specified function by returning the ID cliertimeout (ID).
var id = setTimeout(function,times);
clearTimeout(id);
Example:
<script type="text/javascript"> // alert after 3 seconds delay function hello() { alert("I'm sorry, I want you to wait"); } setTimeout("hello()", 3000); // Time display var timeout; function init(){ // Get the current time var date = new Date(); var time = date.toLocaleString(); // Get the corresponding object var h1 = document.getElementById('h1'); // Add styles as required if(0==date.getSeconds()){ // When the number of seconds of the time changes to 0, the red font is displayed h1.innerHTML = '<span style="color:red">' + time + '</span>'; } else { h1.innerHTML = time; } /* * Timed operation, only once First parameter: method of execution; second parameter: timing, in milliseconds * */ setTimeout(init,1000); // How long will it take to execute } // window.setTimeout(init,1000); / / only once // Stop operation function stopShow () { clearTimeout(timeout); } </script> <body onload="init();"> <h1 id="h1"></h1> <button onclick="stopShow()">Time stop</button> </body>
Execute the method specified in the function after the time millisecond, or cancel it before execution
setInteval()
setInterval(): it can call a function or evaluate an expression according to a specified period (in milliseconds), or it can be used to end according to the returned ID. This method calls the function continuously until clearInterval() is called or the window is closed.
var id = setInterval(function,times);
clearInterval(id);
function test(){ console.log("....."); } // window is a global object, which calls setInterval() function window.setInterval(test,1000);
history object
The history object is a history object. Contains the URL that the user has visited (in a browser window). The history object is part of the window object, which can be accessed through the window.history Property to access it.
Property of the history object: length, which returns the number of URL s in the browser history list.
Method of history object:
back(): loads the previous URL in the history list.
forward(): load the next URL in the history list. When the page first visits, there is no next URL.
Go (number| URL): the URL parameter uses the URL to be accessed. The number parameter uses the relative location of the URL to be accessed in the History's URL list. go(-1), to previous page
013-history.html
<body> <a href="013-history-a.html">013-history-a.html</a> <h1>I'm the first page</h1> <input type="button" value="forward" onclick="window.history.forward();" /> <script> console.log(window.history); </script> </body>
013-history-a.html
<body> <a href="013-history-b.html">013-history-b.html</a> <h1>I am A page</h1> <input type="button" value="back off" onclick="window.history.back();"/> </body>
013-history-b.html
<body> <h1>I am B page</h1> <input type="button" value="First page" onclick="window.history.go(-2);"/> <input type="button" value="back off" onclick="window.history.back();"/> </body>
location object
The location object is one of the window objects, which provides information related to the documents loaded in the current window, as well as some navigation functions. Also available through window.location Property to access.
Property of location object: set or return the full URL
Method of location object
reload(): reloads the current document.
replace(): replaces the current document with a new document.
<script type="text/javascript"> function openBaidu(){ // No history, replace the current document with a new one // window.location.replace("http://www.baidu.com"); // console.log ( window.location.href ); / / get the complete url window.location.href = "http://www.baidu.com"; } </script> <body> <input type="text" value="" /> <input type="button" value="Refresh" onclick="window.location.reload();" /> <input type="button" value="Baidu" onclick="openBaidu();" /> </body>