1. Global object
var a=100;
function fun(){
a = true;
console.log(window.a);
}
window.fun();
Global variables are properties of the window object
Only the global object affects him
The global object window is the handle of js to operate the browser. These variables and functions directly defined between the <script> tags belong to the properties and methods of the global object of window.
Therefore, when using these variables or calling these functions, you can add window. You can also not add it.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2, the properties of the window
<button onclick="linkOther()">跳转</button>
<button onclick="refresh()">刷新</button>
<button onclick="refresh2()">Refresh without cache</button>
<input type="text" name=""/>
Six officially formulated object properties of window
console.log(window.document) HTML document
console.log(window.frames) frame
console.log(window.location) address bar console.log(window.location.href) output URL directly
console.log(window.history) history
console.log(window.navigator) browser manufacturer information
console.log(window.screen) user device resolution
function linkOther(){
window.location.href="5.history.html";
The value of href is a relative path
}
function refresh(){
reload() does not pass parameters, refresh with cache
window.location.reload();
}
function refresh2(){
Refresh without cache
window.location.reload(true);
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3. Jump page
<button onclick="jump()">跳转</button>
<button onclick="goBack()">上一个</button>
<button onclick="goNext()">Next</button>
<button onclick="goNum()">jump to nth</button>
alert(window.history.length);
function jumo(){
Page jumping by modifying the value of the location.href attribute will increase the history
window.location.href="5.history.html";
｝
function goBack(){
Go back to the previous entry in the record
window.history.back();
}
function goNest(){
go back to the next entry in the record
window.history.forward();
｝
function goNum(){
Jump to the specified page
window.history.go(-1);
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
4. Query the current browser
console.log( window.navigator );
console.log( window.navigator browser manufacturer information. userAgent user equipment);
document.write( window.navigator.userAgent );
if(window.navigator.userAgent.toLowerCase() lowercase.indexOf is found from the beginning("AppleWebKit")!=-1){
alert("Google Chrome");
}
if (window.navigator.userAgent.toLowerCase().indexOf("Gecko")!=-1) {
alert("Firefox");
}
if (window.navigator.userAgent.toLowerCase().indexOf("Trident")!=-1) {
alert("IE");
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
5. Common methods
<button onclick="openNewWindow()">Open window</button>
<button onclick="closeWindow()">Close the window</button>
Open window (small window pops up)
function openNewWindow(){
window.open(url,"","string describing the properties of the new window")
window.open("5.history.html","","width=50px;height:50px;left=300px,top=0");
}
close the window
function openNewWindow(){
window.close():
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
6. Load event
<div style="width:300px;height:400px;background:red"></div>
<script type="text/javascript">
alert(1);
</script>
<div style="width:300px;height:400px;background:yellowgreen"></div>
<script type="text/javascript">
alert(2);
</script>
<script type="text/javascript">
Events: browser actions or user actions
Event handlers: Responses to events.
When an event fires, an event handler is automatically called in response to the event.
Browser behavior: loading complete, unloading, scrolling, zooming
event load event handler onload
unload onunload (IE valid)
alert(3);
load
window.onload = function(){
alert("Page loading completed!");
}
uninstall
window.onunload = function(){
alert("Your Majesty, are you really leaving your concubine?");
}
</script>
<script type="text/javascript">
alert(4);
</script>
Now pops up 1, pops up the first color block and pops up 2, pops up 3 and pops up the second color block, pops up 4, and finally pops up the page loading is complete
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
7. Scroll bar events
<body style="height:2000px">
i am the top
<div id="box" onclick="goTop()">back to top</div>
<script type="text/javascript">
//scroll onscroll
// When the scroll bar is dragged, the scroll event will be triggered repeatedly, and the onscroll event handler will always be called
window.onscroll = function(){
console.log("滚");
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
console.log( scrollTop );
}
function goTop(){
document.documentElement is equivalent to HTML.scrollTop = 0; the scroll bar distance is top
document.body.scrollTop = 0;
}
</script>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
8. Visual window
window.onresize = function(){
console.log("I'm going to change");
Get the width of the visible window
console.log( document.documentElement.clientWidth );
console.log( document.body.clientWidth );
console.log( window.innerWidth );
var w = document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth;
Get the height of the visible window
console.log( document.documentElement.clientHeight );
console.log( document.body.clientHeight );
console.log( window.innerHeight );
var h = document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
9. Timer
Intermittent timer: called every fixed time
setInterval()
Function: Create an intermittent timer
Parameters: parameter 1 function name or anonymous function parameter 2 time
Return value: the id of the timer. The timer can be stopped according to the id
var timer = setInterval(function name/anonymous function, time (milliseconds))
clearInterval(id)
Stop the specified timer
<button onclick="stop()">吃药</button>
<button onclick="goon()">继续</button>
<button onclick="stopBoom()">defuse the bomb</button>
var timer = setInterval (fun, 2000);
function fun(){
console.log("Sick!"); Intermittent timer
}
function stop(){
clearInterval( timer ); stop the specified timer
}
function goon(){
Assign the id of the returned timer to the global variable timer
timer = setInterval(fun,2000); restart the timer
}
In js, only timers are created and stopped, but timers are not continued.
Delay timer: execute after a fixed time
setTimeout(function name/anonymous function, time)
Function: Create a delay timer.
Parameters: parameter 1 function name or anonymous function parameter 2 time
Return value: the id of the timer. The timer can be stopped according to the id
var timer2 = setTimeout (fun2,5000);
function fun2(){
console.log("Explosion!");
}
Effective after 5s
function stopBoom () {
clearTimeout( timer2 );
}
stop delay timer