标签：function 浏览器 log 单线程 window BOM var console location
一、BOM：浏览器对象，可以和浏览器窗口进行交互的对象，核心对象是window。
BOM与DOM的区别：
DOM是文档对象模型，把文档当作一个对象来看待，它的顶级对象是document。
BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window。
1、窗口载入事件（页面载入事件）：
window.onload：是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。
document.DOMContentLoaded ： document.DOMContentLoaded加载事件，会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。
window.onload = function(){}
window.addEventListener('load',function(){})
<body onl oad="test()">
<script>
// window.addEventListener('load',function(){
// alert('页面加载中...')
// })
function test(){
alert('页面加载中...')
}
</script>
</body>2、调整窗口大小事件
window.onresize：当调整window窗口大小的时候，就触发window.onresize事件，调用事件处理函数。
window.onresize = function(){}
window.addEventListener('resize',function(){})
window.addEventListener('resize',function(){
console.log('窗口大小改变了')
})3、定时器方法
（1）setTimeout(function(){}，间隔时间):在指定的毫秒数后调用函数或执行一段代码
var st = setTimeout(func,1000);
示例：倒计时牌
<style>
div{
width: 500px;
margin: 100px auto;
font-size: 25px;
color: red;
}
</style>
<body>
<!--倒计时牌：今天距离2022年元旦还有：-天-小时-分钟-秒-->
<div></div>
<script>
function showTime(){
var date1 = new Date('2022-01-01 00:00:00');
console.log(date1)
var date2 = new Date();
var m = date1.getTime()-date2.getTime();
var times = m/1000;
var y = parseInt(times/60/60/24/31);
var d = parseInt(times/60/60/24%30);
var h = parseInt(times/60/60%24); h= h>=10?h:'0'+h;
var m = parseInt(times/60%60);m= m>=10?m:'0'+m;
var s = parseInt(times%60);s= s>=10?s:'0'+s;
var str = y+'月'+d+'日'+h+':'+m+':'+s
document.querySelector('div').innerHTML = str;
setTimeout(showTime,1000)
}
window.onload = showTime();
</script>
</body>（2）setInterval（）；按照指定的周期（以毫秒计）来调用函数或执行一段代码；（比较常用）
【案例】3s后自动关闭广告
<script>
//实现三秒后关闭广告
// var timer = setTimeout(func,3000);//只执行一次
setInterval(func,3000) //执行多次
function func(){
console.log('广告关闭了...')
}
</script>（3）clearTimeout（定时器对象）；取消有setTimeout创建的定时器
（4）clearInterval（定时器对象）：取消由setInterval创建的定时器
【案例】60s内只能发送一次短信
① 在页面中放一个文本框和一个“发送”按钮。 ② 在文本框中输入手机号码，然后单击“发送”按钮，就可以发送短信。 ③ 在按钮单击之后，按钮上的文字会变为“还剩 x 秒再次单击”。<body>
<div>
<label>
手机号码：
<input type="text" name="" id="">
<button id="btn">发送</button>
</label>
</div>
<script>
//1.获取按钮
var btn = document.querySelector('#btn')
var time = 60;//定义剩下的秒数
btn.addEventListener('click',function(){
btn.disabled = true;
//此处添加倒计时按钮
//2.创建定时器，：setInveral
var timer = setInterval(function(){
if(time == 0){
//2.1清除定时器
clearInterval(timer);
//2.1让按钮可用
btn.disabled = false;
//2.3让按钮的文字变成发送
btn.innerHTML = '重新发送';
time = 60;
}else{
btn.innerHTML = '还剩'+time+'秒';
time--;
}
},1000)
})
</script>
</body> 
setTimeout和setInterval的区别：
setTimeout：执行一次
setInterval：重复执行
二、单线程：js程序是单线程的 ，同一个时间只能做一件事
同步：所谓同步，就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
console.log(1); //先输出了1、2 setTimeout(function () { console.log(3); //，等待5秒后输出3 }, 5000); console.log(2);异步：所谓异步，就是在做一件事件的同时，可以去处理其他的事情。
3、js执行机制：执行栈、任务队列
console.log(1); setTimeout(function () { console.log(3); }, 0); for (var i = 0, str = ''; i < 900000; i++) { str += i; // 利用字符串拼接运算拖慢执行时间 } console.log(2);
三、location对象：地址对象
1、URL：统一资源定位符（网址）
（1）protocol:网络协议。http、https、ftp、milto
（2）host：服务器主机名 (如www.baidu.com)
本地机的名称：localhost ---->127.0.0.1
（3）port：端口号。有65535个端口号，每个端口号对应一个服务
0~1023：都被系统使用，有特定的服务；
1024~65535：用户可以使用
（4）path：页面文件的路径
http://www.souhu.com
(5）query：查询参数。传递给服务器的参数。参数之间用‘&‘
分隔，参数和服务器地址之间用’？’分隔
http://localhost:8080/getData?id = "1001"&name = "张三
2、常用属性：
（1）location.search:返回当前URL的查询部分，即”？“之后的部分
（2）location.hash:返回URL中‘#’开始的内容
（3）location.host:返回URL的主机名和端口号
（4）location.histname:返回URL的主机名
（5）location.href:返回完整的URL
<body> <button>去百度</button> <script> var btn = document.querySelector('button') btn.addEventListener('click',function(){ location.href = "http://www.baidu.com" // document.location = "http://www.baidu.com" }) </script> </body>（6）location.pathname:返回路径名
（7）location.port:返回URL的端口号
（8）location.protocol:返回URL的网络协议
decodeURIComponent():是js中的解码函数
【案例】获取URL参数
创建login.html登录页面：
<form action="index.html">
用户名： <input type="text" name="uname">
<input type="submit" value="登录">
</form>
创建index.html首页
console.log(location.search); // 结果为：?uname=andy
// 1. 去掉search中的问号“?”
var params = location.search.substr(1);
console.log(params); // 结果为：uname=andy
// 2. 把字符串分割为数组
var arr = params.split('=');
console.log(arr); // 结果为：["uname", "andy"]
var div = document.querySelector('div');
// 3. 把数据写入div中
div.innerHTML = arr[1] + '欢迎您';
3、常用方法
四、navigator对象：用于导航
1、常用属性：
2、常用方法：
常用方法javaEnabled()：指定是否在浏览器中启用Java。
五、history对象：记录访问的历史
1、常用属性：
history.length属性：返回历史列表中的网址数。
2、常用方法：
标签：function,浏览器,log,单线程,window,BOM,var,console,location 来源： https://blog.csdn.net/m0_46420078/article/details/121579011
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。