1、window对象
1.1、window对象:
window对象是BOM的核心,window对象指当前的浏览器窗口
所有javaScript全局对象、函数以及变量均自动生成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> window.document.write("hello");/*这个效果和不写window.是一样的*/ </script> </body> </html>
1.2、window尺寸
window.onnerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
备注:这个高度和宽度计算的不包含工具栏和滚动条这一部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> document.write(`高度:`+window.innerHeight+`,宽度:`+window.innerWidth);/*这个效果和不写window.是一样的*/ </script> </body> </html>
1.3window方法:
window.open() - 打开新窗口
window.close() - 关闭当前窗口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="btnOnClick()">按钮</button> <script> function btnOnClick(){ window.open("array1.html","hahaha","width=300,height=300,top=300,left=300,toolbar=yes") /*要打开的窗口名|窗口命名|属性设置|toolbar设置属性如何显示,谷歌浏览器直接没有toolbar*/ window.close();/*关闭当前窗口*/ } </script> </body> </html>
2、计时器
2.1、计时事件
通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件
2.2、计时方法:
1、setInterval() - 间隔指定的毫秒数不停地执行指定的代码
clearInterval() - 方法用于停止setInterval()方法执行的函数代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="stopTime()">anniu</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; } function stopTime(){ clearInterval(mytime); } </script> </body> </html>
2、setTimeout() - 暂停指定的毫秒数后执行指定的代码
clearTimeout() - 方法用于停止执行setTimeout()方法的函数代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="myWin()">弹出一次</button> <button id="btn2" onclick="myWin2()">一直弹出</button> <button id="btn3" onclick="stopWin()">停止弹出</button> <script> var win; function myWin(){ win = setTimeout(function(){ alert("hello"); },3000); } function myWin2(){ alert("hello"); win = setTimeout(myWin2,3000); /*方法自己调用自己可以一直执行*/ } function stopWin(){ clearInterval(win); } </script> </body> </html>
区别:第一个方法是一只调用函数,第二种方法是一直自己调用自己