BOM(browser object module)和定时器

//BOM 浏览器对象模型

//它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window

//BOM由一系列的对象构成,并且每个对象都有很多方法和属性

dom和bom对比:

window对象是浏览的顶级对象,它有双重角色:

1.它是js的一个接口;

2.它是一个全局对象,定义在全局中的变量和函数,都会变成window对象的属性和方法

var num = 111;

console.log(num);

console.log(window.num);

function fn() {

console.log(22222)

}

fn();

window.fn();

console.dir(window) // 里面有window的方法和属性如alert()

window.name //特殊属性, 默认存在,打印出来是空. 所以定义变量一般不用 name作变量名

</script>

//window对象的常见事件

//window.onload=function(){ }或者window.addEventListener('load',function(){})

// 这个事件是页面加载事件,当文档内容全部(包括脚本,图片,css文件等)加载完成就触发该事件,

// 就调用的处理函数.

//有了这个函数可以把JS代码写到页面元素的上方

//2 window.onload只能写一次,有多个以最后一个为准;addEventListener则没有限制

window.addEventListener('load', function () {

alert(2222)// 其次弹出

})

//DOMContentLoaded 是等DOM加载完毕,不包含图片 css等就可以执行

document.addEventListener("DOMContentLoaded", function () {

alert(333333) //最先弹出,而且可以展示js的页面交互效果.

})

window.onload = function () {

var btn = document.querySelector('button')

btn.onclick = function () {

alert(111111111) // 点击弹出

}

//调整窗口大小事件

window.addEventListener('resize', function () {

let div = document.querySelector('div')

if (window.innerWidth < 800) {

div.style.display = 'none';

} else {

div.style.display = 'block';

}

})

</script>

window对象的定时器

<body>

<button> 停止爆炸定时器 </button>

<div>

</div>

<button class="begin">开启倒计时</button>

<button class="stop">停止倒计时</button>

//定时器

//1. window.setTimeout(调用函数,[延迟毫秒数])

//延迟n毫秒后,调用这个函数一次,结束.

//window可以省略

//调用函数可以直接写函数,也可以写函数名(或'函数名()')三种形式.

//延迟毫秒数的默认是0,单位是毫秒

//这个调用函数,我们也称为回调函数 callback

var time1 = setTimeout(fn, 2000)

function fn() {

console.log('爆炸了,你死了')

}

//1.1 停止setTimeout()定时器 clearTimeout(计时器的名字)

var btn = document.querySelector('button')

btn.addEventListener('click', function () {

clearTimeout(time1)

})

//2. window.setInterval(调用函数,[延迟毫秒数])定时器

// 每隔这个延迟时间,就调用这个函数,可以调用无数次.

//案例: 倒计时案例

var hour = document.querySelector('.hour')

var minute = document.querySelector('.minute')

var second = document.querySelector('.second')

var inputTime = +new Date('2022-1-7 00:00:00')

var time1 = null; //全局变量 null是一个空对象!

var begin = document.querySelector('.begin')

var stop = document.querySelector('.stop')

begin.addEventListener('click', function () {

countdown();//先调用一次这个函数,防止第一次刷新页面时间显示有空白

time1 = setInterval(countdown, 1000);

function countdown() {

var nowtime = +new Date()//返回的是当前时间总的毫秒数

var times = (inputTime - nowtime) / 1000;//times是剩余时间总的秒数

var h = parseInt(times / 60 / 60 % 24);//小时

var m = parseInt(times / 60 % 60);

var s = parseInt(times % 60);

h = h < 10 ? '0' + h : h;

hour.innerHTML = h;

m = m < 10 ? '0' + m : m;

minute.innerHTML = m;

s = s < 10 ? '0' + s : s;

second.innerHTML = s;

}

})

stop.addEventListener('click', function () {

clearInterval(time1)

})

</script>

</body>

发送短信验证码案例

<body>

手机号码: <input type="number"> <button> 发送</button>

//发送短信验证码案例

//按钮点击后,禁用它, disable为true

//同时按钮的内容变化, button需要用innerHTML来修改

//按钮内容有秒数的变化,因此需要用定时器

//需要定义一个变量在定时器中,不断递减

//定时器要停止,并且复原按钮初始状态

var btn = document.querySelector('button')

var time = 5;

btn.addEventListener('click', function () {

btn.disabled = true;

var timer = setInterval(function () {

if (time == 0) {

//清除定时器和复原按钮

clearInterval(timer);

btn.disabled = false;

btn.innerHTML = '发送';

time = 5;//这个是计时重新开始

} else {

btn.innerHTML = '还剩下' + time + '秒';

time--;

}

}, 1000)

})

//this指向问题: 一般情况下this指向的是那个调用它的对象

//1.全局作用域或普通函数中 this指向全局对象window (定时器里面的this也指向window)

console.log(this)// window

setInterval(function () {

// console.log(this) // window

}, 2000)

//2.方法调用中谁调用指向谁

var a = {

sayHi: function () {

// console.log(this) // 指向的是a这个对象

}

a.sayHi();

//3.构造函数中this指向构造函数的实例

function fun() {

console.log(this) // this指向的是fn 是fun的实例对象

}

var fn = new fun()

</script>

</body>

posted @ 2022-01-06 20:36 我的猫在哪里阅读(35) 评论(0) 收藏举报

刷新页面返回顶部

我的猫在哪里

BOM(browser object module)和定时器

公告