WebAPI第三天学习总结—— 定时器

WebAPI 专栏收录该内容
23 篇文章 0 订阅

定时器(两种)

window 对象给我们提供了 2 个非常好用的方法-定时器。

  • setTimeout()

  • setInterval()

setTimeout() 炸弹定时器

开启定时器

语法

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

setTimeout()这个调用函数我们也称为回调函数 callback

注意

  1. window 可以省略。
  2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串’函数名()'三种形式。第三种不推荐
  3. 延迟的毫秒数省略默认是 0,如果写,必须是毫秒。
  4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
普通函数是按照代码顺序直接调用。

简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
例如:定时器中的调用函数,事件处理函数,也是回调函数。

element.onclick = function(){}   或者  element.addEventListener("click", fn);   里面的 函数也是回调函数。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. setTimeout 
        // 语法规范:  window.setTimeout(调用函数, 延时时间);
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略,如果省略默认的是0
        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器,我们经常给定时器加标识符 (名字)
        // 回调函数是一个匿名函数
        // window.setTimeout(function () {
        //     console.log('时间到了');
        // }, 2000);

        function callback() {
            console.log('爆炸了');
        }
        callback();
        
        // 回调函数是一个有名函数
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>
</body>

</html>

案例:5秒后关闭广告

在这里插入图片描述

案例分析

  • 核心思路:5秒之后,就把这个广告隐藏起来
  • 用定时器setTimeout

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        // 获取要操作的元素
        var ad = document.querySelector('.ad');
        // 开启定时器
        setTimeout(function () {
            ad.style.display = 'none';
        }, 5000)
    </script>
</body>

</html>

停止定时器

语法

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器。

注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符 。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击停止定时器</button>

    <script>
        var btn = document.querySelector('button');
        // 开启定时器
        var timer = setTimeout(function(){
            console.log('爆炸了');
        } , 5000);
        // 给按钮注册单击事件
        btn.addEventListener('click' , function () {
            // 停止定时器
            clearTimeout(timer);
        });
    </script>
</body>
</html>

setInterval()闹钟定时器

开启定时器

语法

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。

注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
  3. 间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
  4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
  5. 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. setInterval 
        // 语法规范:  window.setInterval(调用函数, 延时时间);
        setInterval(function () {
            console.log('继续输出');
        }, 1000);
        // 2. setTimeout  延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
    </script>
</body>

</html>

案例:倒计时

在这里插入图片描述

案例分析

  • ①这个倒计时是不断变化的,因此需要定时器来自动变化setInterval
  • ②三个黑色盒子里面分别存放时分秒
  • ③三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
  • ④第一次执行也是间隔毫秒数,因此刚刷新页面会有空白
  • ⑤最好采取封装函数的方式, 这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-10-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            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>

</html>

补充:给时间补零的函数

// 给时间补零的函数
function padZero(n) {
    // if(n < 10) {
    //     return '0' + n
    // } else {
    //     return n
    // }
    // return n < 10 ? '0' + n : n
    // return ('0' + n).slice(-2)
    return ('' + n).padStart(2, '0')
}

停止定时器

语法

window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符 。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>

    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象

        begin.addEventListener('click', function () {
            timer = setInterval(function () {
                console.log('ni hao ma');
            }, 1000);
        });
        stop.addEventListener('click', function() {
            clearInterval(timer);
        });
    </script>
</body>

</html>

案例:发送短信倒计时

点击按钮后,该按钮3秒之内不能再次点击,防止重复发送短信。

在这里插入图片描述

案例分析

  • ①按钮点击之后,会禁用 disabledtrue
  • ②同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
  • ③里面秒数是有变化的,因此需要用到定时器
  • ④定义一个变量,在定时器里面,不断递减
  • ⑤如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    手机号码: <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后,会禁用 disabled 为true 
        // 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的,因此需要用到定时器
        // 定义一个变量,在定时器里面,不断递减
        // 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态
        var btn = document.querySelector('button');
        // 全局变量,定义剩下的秒数
        var time = 3; 
        // 注册单击事件
        btn.addEventListener('click', function() {
            // 禁用按钮
            btn.disabled = true;  // 当点击发送后 这个按钮不可以在点击
            // 开启定时器
            var timer = setInterval(function() {
                // 判断剩余秒数
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 3;  // 让倒计时也复原为之前的3s
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>
</body>

</html>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

1 引言 4 1.1 课程设计目标 4 1.2 编程工具(编程环境)介绍 4 1.3 实施时间及主要实施步骤 4 2 需求分析 5 3 系统总体设计 6 4 数据库设计 6 5 主要功能模块的设计与实现 10 5.1 功能模块1详细设计(综合查询员工信息)..........................................................10 5.1.1 详细设计.......................................................................................................10 5.1.2 算法流程........................................................................................................15 5.1.3 界面设计及测试结果.....................................................................................15 6 调试分析 15 7 用户手册 16 8 测试结果 17 8.1 员工信息的添加...................................................................................................17 8.2 员工信息的修改...................................................................................................17 8.3 员工信息的删除...................................................................................................18 8.4 员工信息的综合查询...........................................................................................18 8.5 员工信息按性别统计的结果................................................................................19 8.6 员工信息按状态统计的结果...............................................................................19 8.7 员工信息按职称统计的结果................................................................................20 9 结论 20 10 参考文献 20
©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值