window对象
- window对象
window对象是BOM核心，window对象指当前的浏览器窗口
所有Javascript全局对象、函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一 - window尺寸
window.innerHeight— 浏览器窗口的内部高度（不包含工具栏和滚动条）window.innerWidth— 浏览器窗口的内部宽度 - window方法
window.open(url, window name, style)— 打开新窗口window.close()— 关闭窗口
计时器
- 计时事件：通过使用Javascript，可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，称之为计时事件
- 计时方法：通过例子来了解方法
代码示例
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6</head>
7<body>
8 <p id="pTime"></p>
9 <button onclick="stopTime()">Stop Time</button>
10</body>
11 <script>
12 // setInterval() 间隔制定的毫秒数 不停地执行指定的代码 （本例中是间隔1000毫秒，不停的执行getTime()这个方法）
13 var mytime = setInterval(function () {
14 getTime();
15 }, 1000);
16 function getTime() {
17 var d = new Date();
18 var t = d.toLocaleTimeString();
19 document.getElementById("pTime").innerText = t;
20 }
21 // clearInterval() 用于停止 setInterval() 方法执行的函数代码
22 function stopTime() {
23 clearInterval(mytime);
24 }
25 </script>
26</html>效果：
代码示例
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6</head>
7<body onload="myWin()">
8 <p>每隔3秒，会有弹窗。</p>
9 <button onclick="stopWin()">停止弹窗</button>
10</body>
11 <script>
12 var win;
13 // setTimeout() 暂停制定的毫秒数后执行指定的代码。（这里是一个递归，setTimeout() 中调用了自己，所以才会不断执行，但是 setInterval() 方法是自动重复调用函数代码）
14 function myWin() {
15 alert("Hello");
16 win = setTimeout(function () {
17 myWin();
18 }, 3000);
19 }
20 // clearTimeout() 用于停止执行 setTimeout() 方法的函数代码
21 function stopWin() {
22 clearTimeout(win)
23 }
24 </script>
25</html>效果：
每隔3秒会有显示了【Hello】的弹窗出现，知道点击按钮【停止弹窗】后停止。
History对象
- History对象：window.histroy对象包含浏览器的历史(url)的集合
- History方法：
history.back()— 与在浏览器点击后退按钮相同history.forward()— 与在浏览器中点击前进按钮相同history.go()— 进入历史中的某个界面使用场景：在某些网站，例如CSDN，如果想评论某篇文章时，会要求你先登录。所以先跳转到登陆界面，完成登陆后，再跳转回之前想评论的那篇文章页面。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Login</title>
6</head>
7<body>
8 <form>
9 <input type="text" id="userName">
10 </form>
11 <button id="btn" onclick="safe()">登陆</button>
12</body>
13 <script>
14 function safe() {
15 var name = document.getElementById("userName").value;
16 // -1表示回到前一个界面
17 if (name = "Yes") {
18 history.go(-1);
19 } else {
20 alert("输入错误");
21 }
22 }
23 </script>
24</html>效果：
Location对象
- Location对象：window.location对象用于获取当前页面的地址（URL），并把浏览器重定向到新的页面。
- Location对象的属性：
location.hostname— 返回web主机的域名location.pathname— 返回当前页面的路径和文件名location.port— 返回web主机的端口location.protocol— 返回所使用的web协议（http:// 或 https://）location.href— 返回当前页面的URLlocation.assign()— 方法加载新的文档这里有一个小的需要注意的地方：
window.location.assign(url)： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的 URL，当前页面会转为新页面内容，可以点击后退返回上一个页面。window.location.replace(url)： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的.
Screen对象
- Screen对象：window.screen对象包含有关用户屏幕的信息。
- 属性：
screen.availWidth— 可用屏幕宽度screen.availHeight— 可用屏幕高度screen.Height— 屏幕高度screen.Width— 屏幕宽度