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>
区别：第一个方法是一只调用函数，第二种方法是一直自己调用自己
3、History对象
3.1、History对象：
window.history对象包含浏览器的历史(url)的集合
3.2、History方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go() - 进入历史中的某个页面（当前页面是0，可以往前是负数，往后是正数）
history1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="history2.html">点击跳转到history2.html</a>
<button id="btn" onclick="forwardJump()">向前进(下一个页面)跳转</button>
<script>
function forwardJump(){
history.forward();
}
</script>
</body>
</html>
history2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="goceshi()">点击跳回到之前的页面</button>
<script>
function goceshi(){
history.back();/*返回到之前的界面*/
}
</script>
</body>
</html>
history.go()用法：
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
</head>
<body>
<a href="login.html">进入登录验证界面</a>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<body>
<form action="">
<input type="text" id = username>
</form>
<button id="btn" onclick="safe()">确认</button>
<script>
function safe(){
var name = document.getElementById("username").value;
if(name == "hello"){
history.go(-1);
}else{
alert("输入错误");
}
}
</script>
</body>
</html>
4、Location对象
4.1、Location对象：
window.location对象用于获得当前页面的地址（URL），并把浏览器重新定向到新的页面
4.2、Location对象的属性：
location.hostname: 返回web主机的域名
location.pathname: 返回当前页面的路径和文件名
location.port: 返回web主机的端口
location.protocol: 返回所使用的web协议(http://或https://)
location.href: 属性返回当前页面的URL
location.assign()方法加载新的文档
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="getLoc()">按钮1</button>
<button id="btn2" onclick="reNew()">按钮2</button>
<p id="ptime"></p>
</div>
<script>
function getLoc(){
document.getElementById("ptime").innerHTML = window.location.port;
var newnode = document.createElement("div");
document.getElementById("div").appendChild(newnode);
newnode.innerHTML = window.location.port;
}
function reNew(){
location.assign("http://www.baidu.com");
}
</script>
</body>
</html>
5、Screen对象
5.1、Screen对象：
window.screen对象包含有关用户屏幕的信息
5.2、属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.height - 屏幕高度
screen.width - 屏幕宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.write(`可用高度`+screen.availHeight+`，可用宽度`+screen.availWidth+`<br/>`);
document.write(`整体高度`+screen.height+`，整体宽度`+screen.width+`<br/>`);
</script>
</body>
</html>