标签：function 定时器 对象 JavaScript window BOM var
文章目录
一.BOM概述
1.什么是BOM
BOM（BrowserObject Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很对方法和属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是w3c，BOM最初是Netscape浏览器标准的一部分
2.BOM的构成
BOM比DOM更大，它包含了DOM
window对象是浏览器的顶级对象，它具有双重角色。
1.它是JS访问浏览器的一个接口
2.它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如：alert( )、prompr( )等
注意：window下的一个特殊属性window.name
3.窗口加载事件
<!-- 传统的窗口加载事件 只能写一次-->
window.onload = function(){}
或者
<!-- 没有限制 -->
window.addEventListener(‘load’,function(){});
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）就调用到处理函数
window.addEventListener(‘DOMContentLoaded’,function(){});
4.调整窗口大小事件
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数
window.onresize = function(){}
或者 window.addEventListener(‘resize’,function(){});
注意：
1.只要窗口大小发生像素变化，就会触发这个事件
2.我们经常利用这个事件完成响应式布局。window.innerWidth当屏幕的宽度
5. 定时器
两种定时器
- setTimeout（）
- setInterval （）
setTimeout（）定时器
window.setTimeout（调用函数，[延迟的毫秒数]）;
setTimeout（）方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
setTimeout（）这个调用函数我们也称之为回调函数callback
普通函数是按照代码顺序直接调用
而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数
简单理解：回调，就是回头调用的意思，上一件事干完，再回头再调用这个函数
5秒之后自动关闭广告案例：
<img src="../BOM/ad.jpg" alt="" class ="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function(){
ad.style.display = 'none';
},5000)
</script>
停止setTimeout（）定时器：
window.clearTimeout（timeoutID）;
1.window 可以省略
2.里面的参数就是定时器的标识符
setInterval（）定时器
window.setInterval（调用函数，[间隔的毫秒数]）;
setTimeout（）方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
倒计时案例：
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<span class = "hour"></span>
<span class = "minute"></span>
<span class = "second"></span>
</div>
<script>
// 1. 获取元素
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2022-1-25 18:00:00'); // 返回的是用户输入时间总的毫秒数
countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
// 2. 开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
清除计时器：
发送短信案例：
发送短信<input type="number"><button>发送</button>
<script>
var btn = document.querySelector('button');
var time= 3;
btn.addEventListener('click',function(){
btn.disabled = true;//当输入框无内容时，按钮点击后会禁用
var timer = setInterval(function(){ //设置定时器
if(time == 0){
clearInterval(timer);//当时间为0时销毁定时器
btn.disabled = false;
btn.innerHTML = '发送';
time = 3;
}else{
btn.innerHTML = '还剩下'+ time +'秒';
time--;
}
},1000);
})
</script>
6.this
this的指向在函数定义的时候是确定不了的，只有在函数执行的时候才能确定this到底指向谁。一般情况下this的最终指向的是那个调用它的对象
1.全局作用域或者普通函数中this指向全局对象window（主营定时器里面的this指向window）
二.JS执行机制
1.JS是单线程
JavaScript语言的一大特点是单线程，同一个时间只能做一件事。这是因为JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束才会执行后一个，导致的问题是：如果JS执行的时间过长，这样会造成页面渲染不连贯，导致页面渲染加载阻塞的感觉
于是JS提出了同步和异步
JS的执行机制：
2.location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
URL：统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它
3.location对象的属性
4.location对象的方法
5.navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的uesr-agent头部的值
6.history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互该对象包含用户（在浏览器窗口中）访问过得URL
标签：function,定时器,对象,JavaScript,window,BOM,var 来源： https://blog.csdn.net/qq_47157937/article/details/122686153
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。