window常见事件（包含定时器及案例）

window常见事件

1、window.onload() 窗口加载事件

有了它，我们就可以在页面的任何位置的script标签写js代码

因为onload是等页面全部内容加载完毕之后，再去执行函数内的代码，使用时我们用事件包含起来就行了

window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })

2、DOMContentLoaded事件（与上面类似，差别在下）

此事件是等到DOM加载完成后，就执行，不用等到图片、css加载完毕

如果网站图片较多，我们用load会等页面全部加载完成之后再显示交互效果，用户体验较差，因此可以用DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })

3、resize   浏览器窗口大小发生变化时触发（曾经用于响应式布局）

window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })

4、 setTimeout 

语法规范：  window.setTimeout(调用函数, 延时时间);

1. 这个window在调用的时候可以省略

2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0

3. 使用方法

（1） 这个调用函数可以直接写函数

setTimeout(function() {

             console.log('时间到了');

   }, 2000);

（2）还可以写 函数名

function callback() {

            console.log('爆炸了');

}

setTimeout(function() {

           console.log('时间到了');

 }, 2000);

（3）还有一个写法 '函数名()'（不提倡）

setTimeout('callback()', 3000); // 我们不提倡这个写法

4. 页面中可能有很多的定时器，我们经常给定时器加名字，起名同时也调用了

var timer1 = setTimeout(callback, 3000);

5、清除定时器clearTimeout(定时器名);

clearTimeout(timer);

5、setInterval （使用方法与上面一致，但是它是重复调用）

案例：（定时器）

 1. 获取元素

2.封装一个函数（用于把事件放入盒子内）

function date() {
            var inputTime = +new Date('2020-9-23 10:20:00'); // 返回的是用户输入时间总的毫秒
            var nowTime = +new Date()
            var time = (inputTime - nowTime) / 1000
            var h = parseInt(time / 60 / 60)
            h = h < 10 ? '0' + h : h
            hour.innerHTML = h
            var min = parseInt(time / 60)
            min = min < 10 ? '0' + min : min
            minute.innerHTML = min
            var sec = parseInt(time % 60)
            sec = sec < 10 ? '0' + sec : sec
            second.innerHTML = sec
        }

3、利用定时器反复调用函数

var timer = setInterval(date, 1000) 

4、注意：一开始刷新页面时，会有原始盒子里的数据，这需要我们在之前先调用一次这个函数，提前先把数据放进盒子内，之后再利用定时器反复调用函数

 

代码示例：

<script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        date()
        function date() {
            var inputTime = +new Date('2020-9-23 10:20:00'); // 返回的是用户输入时间总的毫秒
            var nowTime = +new Date()
            var time = (inputTime - nowTime) / 1000
            var h = parseInt(time / 60 / 60)
            h = h < 10 ? '0' + h : h
            hour.innerHTML = h
            var min = parseInt(time / 60)
            min = min < 10 ? '0' + min : min
            minute.innerHTML = min
            var sec = parseInt(time % 60)
            sec = sec < 10 ? '0' + sec : sec
            second.innerHTML = sec
        }
        var timer = setInterval(date, 1000)
    </script>