WebApi入门第十一章（定时器作用及语法）

海海呐

已于 2022-06-29 09:42:45 修改

阅读量567

点赞数 3

分类专栏： WebAPI 文章标签：前端

于 2021-08-23 21:38:50 首次发布

本文链接：https://blog.csdn.net/m0_56344602/article/details/119878173

版权

WebAPI 专栏收录该内容

12 篇文章 6 订阅

订阅专栏

1-setInterval

定时器：某一段代码并不是马上执行，而是隔一段时间执行

setInterval:创建定时器
- 特点：一旦创建立即计时，必须要手动停止，否则会无限的每隔一段时间执行代码
clearInterval(定时器id)：清除定时器
- 一个页面可以创建很多个定时器，通过制定定时器id可以清除特定的定时器

  <script>
        /*1.定时器: 让一段代码每隔一定时间自动执行
          2.语法
            开启定时器：  setInterval()    一旦开启永久重复，只能手动调用语法停止
            清除定时器    clearInterval()
          */
        let p1 = document.querySelector('#p1');

        let timeID = null;//声明变量存储定时器
        //注册事件
        document.getElementById('start').onclick = function () {
            /**开启定时器
            第一个参数：一段代码  回调函数
            第二个参数：时间间隔 单位：ms
            返回值： 定时器ID timeID
                定时器ID：一个页面可以开启很多个不同的定时器，浏览器为了区分这些定时器，每开启一个定时器
                就会给它们一个编号，这个编号叫做定时器ID
            */
            timeID =  setInterval(function () {
                console.log('嘿嘿嘿');
                p1.innerText++;
                // let text = p1.innerText;
                // text++; // 只是变量text的值+1
                // console.log(text);
                // p1.innerText = text;
            }, 1000);
        };


        document.getElementById('end').onclick = function () {
            //清除定时器
            //参数：定时器ID
            clearInterval(timeID);
        };

       
    </script>

2-setTimeout

定时器setTimeout与setInterval唯一的区别是，setTimeout定时器只会执行一次
总结：
- 1.如果你想让这个代码一段时间后只执行一次，使用setTimeout
- 2.如果你想让这个代码每隔一段时间执行一次（执行多次），使用setInterval

 <script>
        /* 1. setInterval() :永久定时器   一旦开启会永久重复， 只能手动清除
                clearInterval() :清除

            2. setTimeout() : 一次定时器   一旦开启只会执行一次，执行完毕之后自动清除
        
         */
        
        let timeID =  setTimeout(function(){
             console.log('boom');
         },5000);

         //一次定时器也可以清除
        //  clearInterval(timeID);
        // clearTimeout(timeID);
    
    </script>

倒计时秒杀小案例

效果图

基本结构样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 100px auto;
        }


        span {
            display: inline-block;
            width: 30px;
            height: 40px;
            line-height: 40px;
            background-color: #222;
            color: #fff;
            text-align: center;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="box">
        <span id="spanHour">01</span>
        <span>:</span>
        <span id="spanMin">01</span>
        <span>:</span>
        <span id="spanSec">15</span>
    </div>

</body>

</html>

思路分析

  思路分析

            1. 获取元素：#spanHour,#spanMin,#spanSec

            2. 每隔1000ms，代码执行：定时器 let timeId = setInterval()

            2.1 获取时分秒的具体数据：字符串，转成数字：parseInt()

            2.2 秒数-1

            2.3 判定：秒数如果小于 0

            2.3.1 重置描述为59

            2.3.2 分-1

            2.4 判定：分数如果小于 0

            2.4.1 分数重置为 59

            2.4.2 时-1

            2.5 数据加工：补充前导0（不改变大小，保持2位宽度）

            2.6 数据写回页面给用户看

            2.7 判定：所有数据是否都为0：为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>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 100px auto;
        }


        span {
            display: inline-block;
            width: 30px;
            height: 40px;
            line-height: 40px;
            background-color: #222;
            color: #fff;
            text-align: center;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="box">
        <span id="spanHour">01</span>
        <span>:</span>
        <span id="spanMin">01</span>
        <span>:</span>
        <span id="spanSec">15</span>
    </div>
    <script>
        // 需求：倒计时秒杀：时间到 0 ：0 ：0 执行秒杀效果
        /*
            思路分析
            1. 获取元素：#spanHour,#spanMin,#spanSec
            2. 每隔1000ms，代码执行：定时器 let timeId = setInterval()
            2.1 获取时分秒的具体数据：字符串，转成数字：parseInt()
            2.2 秒数-1
            2.3 判定：秒数如果小于 0
            2.3.1 重置描述为59
            2.3.2 分-1
            2.4 判定：分数如果小于 0
            2.4.1 分数重置为 59
            2.4.2 时-1
            2.5 数据加工：补充前导0（不改变大小，保持2位宽度）
            2.6 数据写回页面给用户看
            2.7 判定：所有数据是否都为0：为0 结束：开始秒杀
        */
        // 1. 获取元素：#spanHour,#spanMin,#spanSec
        let hour = document.getElementById('spanHour');
        let min = document.getElementById('spanMin');
        let sec = document.getElementById('spanSec');
        // console.log(hour, min, sec);
        //     2. 每隔1000ms，代码执行：定时器 let timeId = setInterval()
        let z = setInterval(function () {

            //     2.1 获取时分秒的具体数据：字符串，转成数字：parseInt()
            let h = parseInt(hour.innerText);
            let m = parseInt(min.innerText);
            let s = parseInt(sec.innerText);
            // console.log(h, m, s);
            //     2.2 秒数-1
            s--;
            //     2.3 判定：秒数如果小于 0
            if (s < 0) {
                //     2.3.1 重置描述为59
                s = 59;
                //     2.3.2 分-1
                m--;
            };
            //     2.4 判定：分数如果小于 0
            if (m < 0) {
                //     2.4.1 分数重置为 59
                m = 59;
                //     2.4.2 时-1
                h--;
            };
            //     2.5 数据加工：补充前导0（不改变大小，保持2位宽度）
            if (s < 10) {
                s = '0' + s;
            };
            if (m < 10) {
                m = '0' + m;
            };
            if (h < 10) {
                h = '0' + h;
            };
            //     2.6 数据写回页面给用户看
            hour.innerText = h;
            min.innerText = m;
            sec.innerText = s;
            //     2.7 判定：所有数据是否都为0：为0 结束：开始秒杀
            if (s == 0 && m == 0 && h == 0) {
                clearInterval(z);
                alert('秒杀开始');
            };
        }, 1000);

    </script>
</body>

</html>

下一章：WebApi入门第十章（本地存储 localstorage与sessionstorage）

下一章：WebApi入门第十二章（原生轮播图）

海海呐

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
WebApi入门第十一章（定时器作用及语法）

1.offset属性家族：获取元素真实的宽高和位置 offsetWidth、offsetHeight、offsetParent、offsetLeft、offsetTop 2.之前学习的通过style属性获取宽高的特点 1.只能获取行内的宽高 2.获取到的值是一个string类型，并且带px 3.获取到的只有宽高，不包含padding、border（总结就是行内写的是什么，获取的就是什么） 4.既可以读取，也可以设置 ..
复制链接

扫一扫