javascript--BOM对象

最新推荐文章于 2024-07-27 17:31:46 发布

weixin_44743508

最新推荐文章于 2024-07-27 17:31:46 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/weixin_44743508/article/details/114935856

版权

BOM对象(浏览器对象模型)

主要是应用浏览器窗口的交互对象

窗口加载 window.onload = function(){}

文档内容全部加载才会触发事件（包括文字图像脚本）

注意：只能写一次，多个onload只以第一个为准

同样可以用事件监听来代替

window.addEventListener(‘load’,function(){}) 不限制个数

定时器 setTimeout() setTimeval()

停止定时器 clearTimeout(timeoutName)

		<button type="button">点击停止</button>
		<script type="text/javascript">
			//里面的函数同样可以调用外部函数
			//时间单位为毫秒，省略的时候默认为0
			//页面中有很多定时器，需要加标识符区别出来
			var timer = setTimeout(function(){
				console.log('time out');
			},4000);
			var btn = document.querySelector('button');
			//清除定时器是一定要带 定时器的名字
			btn.addEventListener('click',function(){
				clearTimeout(timer);
				console.log('ss')
			})
		</script>

间接定时器 setInterval(回调函数，间隔的时间)

每间隔多少秒就调用一次这个函数。【重复调用这个函数】

用例：倒计时功能

				var hour = document.querySelector('#hour');
				var min = document.querySelector('#min');
				var sec = document.querySelector('#sec');
				var inputTime = +new Date('2021-3-12 00:00:00');		//初始化 时间的毫秒
				cutDown();	//这里有个细节就是，先执行一下这个倒计时函数，才不会把初始值带到里面去
				setInterval(cutDown,1000)	//没一秒钟执行一次cutDown函数
				function cutDown(time){
					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;
					min.innerHTML = m;
					var s = parseInt(times % 60);			//得到秒钟
					s = s < 10 ? '0' + s : s;
					sec.innerHTML = s;
				}

清除间接计时器 clearInterval(计时器名称)

		<button type="button" id="begin">开始计时</button>
		<button type="button" id="end">结束计时</button>
		<script type="text/javascript">
			var begin = document.querySelector('#begin');
			var end = document.querySelector('#end');
			var timer = null;	//定义一个计时器，复制一个空的全局对象
			begin.addEventListener('click',function(){
				timer = setInterval(function(){		//不能再函数内部定义计时器的名称（会导致外部函数无法访问）
					console.log('计时中');
				},1000);
			});
			end.addEventListener('click',function(){
				clearInterval(timer);	//结束几时需要传入，计时器的名称
			})
		</script>

短信发送实例

		发送短信<input type="text" id="input" /><button type="button" id="btn">发送</button>
		<script type="text/javascript">
			var btn = document.querySelector('#btn');
			var time = 3;	//这是定义倒计时的时间
			btn.addEventListener('click',function(){
				btn.disabled = true;	//设置按钮不能禁止按
				var timer = setInterval(function(){
					if(time == 0){		//当时间为0时开始计时
						btn.disabled = false;
						clearInterval(timer);	//这里清除计时器
						btn.innerHTML = '发送';
						time = 3;
					}else{
						btn.innerHTML = '还剩下' + time +'秒';
						time --;
						
					}
				},1000);
			})
		</script>

this指向的对象

全局this

全局的this 指向的是window【定时器里的this也指向window】

方法里的this 指向调用者【谁调用方法指向谁】

构造函数里的this指向构造函数的实例
function Fun(){
	console.log(this);	//this指向的是fun  (它是一个实例对象)
}
var fun = new Fun();