window object
1. window Object
The window object is the core of BOM. The window object refers to the current browser window
All JavaScript global objects, functions, and variables automatically become members of the window object
Global variables are properties of window s objects
Global functions are methods of window s objects
Even the document of the HTML DOM is one of the properties of the window object
2. window size
window.innerHeight - Internal height of browser window
window.innerWidth - Internal height of browser window
3. window method:
window.open(): Open a new window
window.close(): Close the current window
<body>
<button id="btn" onclick="btnOnclick()">Button</button>
<script>
// document.write("width"+window.innerWidth+ ", height"+window.innerHeight);
function btnOnclick() {
// window.open("index02.html","window name","height = 200,width = 200 top = 100 left = 100 toolbar = yes menubar = no" );
window.close();
}
</script>
</body>
timer
1. Timing events:
Using JavaScript, we have the ability to execute code after a set time interval, rather than immediately after a function has been called, which we call timing events
2. Timing method
1) setInterval() interval specified milliseconds to execute specified code nonstop
The clearInterval() method stops the function code executed by the setInterval() method
<button id="btn" onclick="stopTime()">Button</button>
<p id="ptime"></p>
<script>
var myTime = setInterval(function () {
getTime();
}, 1000);
function getTime() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("ptime").innerHTML = t;
}//Delayed execution
function stopTime() {
clearInterval(myTime);
}
</script>2) Execute specified code after setTimeout() pauses specified milliseconds
The clearTimeout() method stops the function code executing the setTimeout() method
<body onload="myWin()">
<button id="btn" onclick="stopWin()">Button</button>
<p id="ptime"></p>
<script>
//setTimeout() pauses the specified milliseconds before executing the specified code
var win;
function myWin() {
alert("hello");
win = setTimeout(function () {
myWin();
},3000);
}//Call your own execution
//The clearTimeout() method stops the function code executing the setTimeout() method
function stopWin() {
clearTimeout(win);
}
</script>
</body>History object
1. History object:
The window.history object contains a collection of the browser's history (url)
2. History method:
history.back(): the same as clicking the back button in the browser
history.forword() is the same as clicking a button forward in the browser
Part in file index03
<body>
<button id="btn" onclick="goCeShi()">Back off</button>
<script>
function goCeShi() {
history.back();
}
</script>
</body>Part in ceshi
<body>
<a href="index03.html">Jump To index03</a>
<button id="btn" onclick="goIndex03()" >forward</button>
<script>
function goIndex03() {
history.forward();
}
</script>
</body>history.go() goes to a page in history
<a href="index03.html">Jump to login page</a>
<form>
<input type="text" id="username">
</form>
<button id="btn" onclick="safe()">Sign in</button>
<script>
function safe() {
var name = document.getElementById("username").value;
if (name=="hello"){
history.go(-1);
}else{
alert("Input error")
}
}
</script>Location object
1. Location object
The window.location object is used to get the address (url) of the current page and redirect the browser to a new page
2. Properties of the Location object
location.hostname Returns the domain name of the web host
location.pathname returns the path and file name of the current page
location.port returns the port of the web host
location.protocol returns the web protocol used (http://or https://)
The location.href property returns the url of the current page
location.assign() method loads a new document
<button id="btn" onclick="getLoc()">Button</button>
<p id="pid"></p>
<script>
function getLoc() {
// document.getElementById("pid").innerHTML = window.location.href;
location.assign("http://www.jikexueyuan.com");
}
</script>Screen object
1. Screen Object
The window.screen object contains information about the user's screen
2. Attributes
Available screen widths for screen.availWidth
screen.availHeight Available Screen Height
screen.Height Screen Height
screen.Width screen width
document.write("Available Height:"+screen.availHeight+"，Available Width:"+screen.availWidth);
document.write("Screen height:"+screen.height+",Screen width:"+screen.width);