Web APls 阶段——第七节——定时器-间歇函数和倒计时效果

最新推荐文章于 2024-09-10 10:30:29 发布

不能瞌睡呀

最新推荐文章于 2024-09-10 10:30:29 发布

阅读量1k

点赞数 2

文章标签： javascript web

本文链接：https://blog.csdn.net/qq_56897195/article/details/124216741

版权

文章目录

1. 定时器-间歇函数
2. 回调函数
3. 案例：5秒后自动关闭的广告
4. 倒计时效果
5. 秒杀倒计时

1. 定时器-间歇函数

目标：能够说出定时器函数在开发中的使用场景

1.1 定时器函数介绍

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种，今天我先讲间歇函数

1.2 两种定时器

在这里插入图片描述

1.3 setTimeout() 定时器

在这里插入图片描述
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。只出现一次

1.4 停止setTimeout()定时器

在这里插入图片描述
clearTimeout()方法取消了先前通过调用setTimeout ()建立的定时器。
注意∶

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

在这里插入图片描述

1.5 定时器函数——setlnterval()定时器

定时器函数可以开启和关闭定时器

开启定时器

作用：每隔一段时间调用这个函数，间隔时间单位是毫秒。
setInterval(）方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。可以重复多次

在这里插入图片描述
注意：

函数名字不需要加括号
定时器返回的是一个id数字

1.5 关闭定时器

在这里插入图片描述
注意：

函数名字不需要加括号
定时器返回的是一个id数字
一般不会刚创建就停止，而是满足一定条件再停止

// setTimeout延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器
// setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

在这里插入图片描述

<!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>
        //这个调用函数可以直接写函数,还可以写函数名
        //页面中可能有很多的定时器，我们经常给定时器加标识符（名字)

        // setInterval(function () {
        //     console.log('高薪就业')
        // }, 1000)

        function show() {
            console.log('月薪过2万')
        }

        let timer = setInterval(show, 1000)
        // let timer1 = setInterval(show, 1000)

        // // 清除定时器
        // clearInterval(timer)
    </script>
</body>

</html>

2. 回调函数

在这里插入图片描述

setTimeout() 这个调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用。
而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解︰回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
以前我们讲的 element.onclick =function())或者element.addEventListener(click",fn);里面的函数也是回调函数。

3. 案例：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>
    <img src="./images/b03.jpg" alt="" class="ad">
    <script>
        var ad =document.querySelector('.ad')
        setTimeout(function(){
            ad.style.display='none';

        },5000)
    </script>
</body>
</html>

4. 倒计时效果

需求：按钮60秒之后才可以使用
在这里插入图片描述

分析：
①：开始先把按钮禁用（disabled 属性）
②：一定要获取元素
③：函数内处理逻辑

秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器里面文字变为同意最后按钮可以点击。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(6)</button>
    <script>
        // 1. 获取元素 button 
        let btn = document.querySelector('.btn')
        // 2. 计算逻辑
        // 2.1 我们需要一个变量 用来计数  
        let i = 6
        // 2.2 开启定时器 间歇函数  timer 定时器的序号id
        let timer = setInterval(function () {
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0) {
                // 不走了，清除定时器 
                clearInterval(timer)
                // 开启按钮
                btn.disabled = false
                // 更换文字
                btn.innerHTML = '我同意该协议啦'
            }
        }, 1000)
    </script>
</body>

</html>

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>
    <style>
        div{
            
            width: 132px;
            height: 30px;
            /* border: 1px solid red; */
        }
        span{
            
           
            float: left;
            width: 30px;
            height: 30px;
            margin: 0px 6px;
            border: 1px solid black;
            line-height: 30px;
            background-color: cornflowerblue;
            text-align: center;
        }
        
    </style>
</head>
<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
       
    </div>
    <script>
         //获取元素
         var hour = document.querySelector( '.hour'); //小时的黑色盒子
         var minute = document.querySelector( '.minute');//分钟的黑色盒子
         var second = document.querySelector( '.second'); //秒数的黑色盒子
         var inputTime=+new Date('2022-10-29 00: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>