BOM

最新推荐文章于 2024-08-22 18:06:31 发布

lineeil

最新推荐文章于 2024-08-22 18:06:31 发布

阅读量103

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_51186587/article/details/115801586

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.BOM概述

在这里插入图片描述

2.window常见事件

(1).页面加载事件

窗口加载事件

(2).调整窗口大小事件

在这里插入图片描述

3.定时器

(1).setTimeout()定时器

语法：window.setTimeout(调用函数，延迟的毫秒数);
该定时器在定时器到期后执行函数
window在调用的时候可以省略不写
setTimeout()里的调用函数也称为回调函数callback
清除定时器window.clearTimeout(timeoutID);
里面的参数是定时器的标识符
window可以省略

(2).setInterval()定时器

语法：window.setInterval(回调函数，间隔的毫秒数)
重复调用一个函数，每隔这个时间，就去调用一次回调函数
清除定时器window.clearInterval(timeoutID);
注意：如果在function里面定义变量则为局部变量！

(3).定时器应用

倒计时效果

<style>
        /* 倒计时效果 */
        .hour,
        .minute,
        .second {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: rgba(0,0,0,.6);
            font-size: 18px;
            color: #fff;
            line-height: 50px;
            text-align: center;
        }
</style>
<body>
<span class="hour"></span>
    <span class="minute"></span>
    <span class="second"></span>
    <script>
        // 1.获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        // 2.如何获取时间
        var inputTime = +new Date('2021-4-19 15:00:00');//返回的是用户输入事件的总毫秒数
        countDown();//3.先调用一次防止出现空白问题
        // 而且一定要写在inputTime下面，因为有了时间才能调用

        // 4.开启定时器
        setInterval(countDown, 1000);
        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;
        }
    </script>
</body>

发送短信按钮60s后才能点击

手机号码： <input type="number"> <button>发送</button>
    <script>
        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);
        })
    </script>