1.window 对象
1.1window对象说明
window对象就是一个全局变量 表示一个打开的窗口
即 var num = 10 ; console.log(num) == console.log(window.num);
1.2Window对象练习
<script>
var num = 10;
console.log(num) ;//num是一个全局变量
console.log(window.num);//window对象就是一个全局变量
function demo (){
console.log('34324234')
}
window.demo();
</script>
2.load 加载
2.1 load 说明
load 加载 先进行全局加载 再进行执行
等待加载完毕，加载内容包括 dom元素 图片 flash css 等等！！！
2.2load 书写方式
方式1：window.onload = function(){}
方式2window.addEventListener('load',function(){})
2.3练习
<script>
//1 window.onload ; 2.DOMContentLoaded 均为加载
//1.load 加载 先进行全局加载 再进行执行
//等待加载完毕，加载内容包括 dom元素 图片 flash css 等等！！！
//可这样写 window.onload = function(){}
//也可这样写 window.addEventListener('load',function(){})
//2.DOMContentLoaded 只需加载DOM完毕之后，不需要非得加载完毕图片 flash css
var box = document.querySelector('.box');
console.log(box)//null 不使用window.onload
window.addEventListener('load',function(){
var box = document.querySelector('.box');
console.log(box)//使用load 加载<div class="box"></div>
})
// document.addEventListener('DOMContentLoaded', function(){
// console.log('123');
// })
</script>
<div class="box"></div>
3.DOMContentLoaded 加载
3.1 DOMContentLoaded 说明
只需加载DOM完毕之后，不需要非得加载完毕图片 flash css
3.1DOMContentLoaded 书写方式
document.addEventListener('DOMContentLoaded', function(){};
4.resize innerWidth
4.1书写方式
window.addEventListener('resize',function(){}监听窗口变化 一旦窗口变化 就执行函数
window.innerWidth 表示窗口大小
4.2练习
<script>
//resize 监听窗口变化 一旦窗口变化 就执行函数
//加载全局
window.addEventListener('load',function(){
var div = document.querySelector('div');
//监听窗口
window.addEventListener('resize',function(){
if(window.innerWidth>=800 ){
div.style.background = 'red'
}else{
div.style.background = 'yellow'
}
})
});
</script>
<div>resize</div>
5.setTimeout clearTimeout
5.1 setTiemout作用与书写方式
setTimeout指的是一个函数
setTimeout(function(){},1000)
第一个参数为函数 ， 第二个参数为时间 单位为毫秒
作用是 多少毫秒后执行函数
5.2 clearTimeout 的作用与用法
clearTimeout(被取消的setTimeout)取消setTimeout
5.3 练习
<script>
//setTimeout == window.setTimeout
//setTimeout指的是一个函数
//setTimeout('function(){}','1000')
//第一个参数为函数 ， 第二个参数为时间 单位为毫秒
//作用是 1000毫秒后执行函数
var timeOut= setTimeout(function(){
console.log('这是setTimeout')
},2000)
//clearTimeout(被取消的定时器) 取消定时器
clearTimeout(timeOut);
</script>
6.setInterval(function(){},1000) clearInterval()
用法 与 书写方式
setInterval(function(){},1000)
第一个参数为函数 第二个参数为时间 单位为毫秒
表示每隔多少毫秒 执行一次函数
clearInterval(被清除的setInterval)
<script>
var btn = document.querySelector('button');
btn.innerText = '验证码'
var time = 5;
btn.addEventListener('click',function(){
var times = setInterval(function(){
if(time!=0){
btn.disabled = true;
btn.innerText= time;
time--
}else{
btn.innerText = '请重新获取验证码'
clearInterval(times);
time = 5
btn.disabled = false;
}
},1000)
})
</script>
7.location 跳转
7.1 location.href= ''; 跳转到该链接
8.location 函数
location.assign :能够记录浏览器的浏览历史可以实现后退功能！！
location.replace() 不能够记录浏览历史，也不可以回退！！！
location.reload() 刷新页面
<button>跳转链接</button>
<script>
//location.assign() 能够记录浏览器的浏览历史可以实现后退功能！！
//location.replace() 不能够记录浏览历史，也不可以回退！！！
//location.reload() 刷新页面
var bt = document.querySelector('button');
bt.addEventListener('click',function(){
// location.assign('http://www.baidu.com');
// location.replace('http://www.baidu.com')
location.reload();
})
</script>
8 本次所学的所有 window类型 和 属性 location对象方法
8.1 window类型
load 加载
window.addEventListener('load',function(){}) 加载
document.addEventListener('DOMContentLoaded' , function(){}) 加载
resize : 监听窗口变化 一旦变化就执行函数
window.addEventListener('resize',function(){})
8.2 window 属性
window.innerWidth 表示窗口的大小
8.3 window 函数
window.setTimeout('function(){}','时间/毫秒') 多少毫秒后执行函数
clearTimeout(被取消的setTimeout)取消setTimeout
window.scroll(X,Y) 可设置X Y改变 滚动卷入窗口的大小
setInterval(function(){},1000)
第一个参数为函数 第二个参数为时间 单位为毫秒
表示每隔多少毫秒 执行一次函数
clearInterval(被清除的setInterval)
8.4location对象方法
location.assign :能够记录浏览器的浏览历史可以实现后退功能！！
location.replace() 不能够记录浏览历史，也不可以回退！！！
location.reload() 刷新页面
9.新增
9.1 window.open() - open()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,specs,replace)
open方法
9.2 关闭当前窗口
windowName.close() - 关闭当前窗口
9.3 window.moveTo() - 移动当前窗口
9.4 window.resizeTo() - 调整当前窗口的尺寸
<button id="btn1">创建一个窗口</button>
<button id="btn2">改变窗口位置</button>
<button id="btn3">改变窗口大小</button>
<script>
//window.moveTo() - 移动当前窗口
//window.resizeTo() - 调整当前窗口的尺寸
var btn1 = document.querySelector("#btn1")
var btn2 = document.querySelector("#btn2")
var btn3 = document.querySelector("#btn3")
var win = null;
btn1.onclick = function(){
win= window.open('','','width=100,height=100')
}
var num1 = 0;
btn2.onclick = function(){
num1 += 100;
win.moveTo(num1,num1)
}
var num2 = 0;
btn3.onclick = function(){
num2 += 100;
win.resizeTo(num2,num2)
}
10 navigator
11 screen
console.log(screen.availWidth)//屏幕宽度screen.availWidth
console.log(screen.availHeight)//屏幕高度screen.availHeight
12.location
//location.host 主机
// location.hostname 返回 web 主机的域名
// location.pathname 返回当前页面的路径和文件名
// location.port 返回 web 主机的端口 （80 或 443）
// location.protocol 返回所使用的 web 协议（http: 或 https:）
console.log(window.location)
console.log(window.location.host)//host主机 127.0.0.1:5500
//端口5500就是提供一个服务
//location.host 主机
// location.hostname 返回 web 主机的域名
// location.pathname 返回当前页面的路径和文件名
// location.port 返回 web 主机的端口 （80 或 443）
// location.protocol 返回所使用的 web 协议（http: 或 https:）
console.log(window.location.hostname)//127.0.0.1
console.log(window.location.pathname)///%E7%BB%83%E4%B9%A0/15-location.html
console.log(window.location.port)//5500
console.log(window.location.protocol)//http:
13windows.scroll(X,Y)
window.scroll(X,Y) 可设置X Y改变 滚动卷入窗口的大小
