javascript 七 BOM-优快云博客

本文链接：https://blog.youkuaiyun.com/wwwfdfsf/article/details/126040677

一.DOM与BOM

1.DOM可以看成一个页面（document），BOM可以看成是一个浏览器（window）

二.window对象的常见事件

1. 窗口加载事件

window.οnlοad=funxtion（）{}

window.addEventListener（‘load’，function（）{}）

window.addEventListener（‘BOMContentLoaded’，function（）{}）

load：等页面内容全部加载完毕，包含dom元素图片 flash css等

BOMContentLoaded：BOM加载完毕，不包含图片 falsh css等可以执行

2.调整窗口大小事件

window. οnresize=function（）{}

window.addEventListener（‘resize’，function（）{}）

window.innerWidth//当前屏幕宽度

3.定时器

window.setTimeout（‘调用函数’，延迟毫秒数） 一次

window.clearTimeout（timeoutID）//停止定时器

window.setInterval（‘回调函数’，‘毫秒数’）重复调用

window.clearInterval//清除

this指向调用它的函数

案例：5s后，将广告隐藏

	window.onload=function(){
			var img=document.querySelector('img');
			var span=document.getElementById('num');
			var hidee=setTimeout(function(){
				img.style.display='none';
			},5000);
			hidee();
		}

三.倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东倒计时</title>
		<style>
			.timeout{
				height: 150px;
				background: url('img/3.jpeg') no-repeat;
				background-size: contain;
			}
			span{
				display: inline-block;
				width: 30px;
				height: 30px;
				margin-top: 15px;
				line-height: 30px;
				background-color: aquamarine;
				text-align: center;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="timeout">
			<span class="hour">1</span>
			:
			<span class="minute">2</span>
			:
			<span class="second">3</span>
			:
		</div>
		<script>
			window.onload=function(){
				var hour=document.querySelector('.hour');
				var minute=document.querySelector('.minute');
				var second=document.querySelector('.second');
				var inputTime=+new Date('2022-9-1 18:00:00');
				countDown();
				function countDown(){
					var nowTime=+new Date();
					var times=(inputTime-nowTime)/1000;
					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;
				}
				setInterval(countDown,1000)
			}
		</script>
	</body>
</html>

四。发送短信案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发送短信案例</title>
	</head>
	<body>
		<input type="number">
		<button>发送</button>
		<script>
			var btn=document.querySelector('button');
			var time=10;
			btn.addEventListener('click',function(){
				btn.disabled=true;
			var times=setInterval(function(){
					if(time==0){
						clearInterval(times);
						btn.disabled=false;
						btn.innerHTML='发送';
						time=10;
					}else{
						btn.innerHTML='还剩'+time+'秒';
						time--;
					}
					
				},1000);
				
			})
		</script>
	</body>
</html>

五js执行机制

1.js是单线程，同一时间只能干一件事

2.同步异步

同步：依次执行，上一个执行完执行下一个

异步：同一时间处理多个事

3.回调函数属于异步

六。location对象

location属性用于获取或者设置窗体的url，用于解析url

七. navigator对象

属性很多，最常用userAgent该属性返回服务器的user-agent头部的值

下面代码判断用户在那个终端打开页面，实现跳转

	<script>
			if((navigator.userAgent.match(/(phone|pad|iPhone|ios|iPad|Android|Mobie|BlackBerry|IEMobie|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|webOS|Symbian|windows Phone)/i))){
				window.location.href=''//手机
			}
			else{
				window.location.href=''//电脑
			}
		</script>