延迟定时器、间隔定时器

悠悠 2022-09-10 04:21 228阅读 0赞

定时器：让代码每隔一段时间或等待一段时间后再执行的代码，就叫定时器

延迟定时器：让代码等待一会，在执行   只执行一次

语法：setTimeout(函数,时间); 单位：毫秒 1s=1000ms

场景：一次性广告、关不掉的广告

间隔定时器：让代码每隔一段时间 就执行一次  不间断的执行

语法：setInterval(函数,事件); 单位：毫秒 1s=1000ms

场景：计时器、倒计时、轮播图、时钟、动态效果

延迟定时器实现关不掉的广告

代码实现：

间隔定时器实现倒计时

代码实现：

<!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>
            .wrap {
                width: 400px;
                height: 400px;
                background-color: #eaeaea;
                margin: 0 auto;
                border: 1px solid #eaeaea;
            }
    
            .wrap h1 {
                color: blue;
                text-align: center;
                margin: 30px;
            }
    
            .wrap input {
                width: 88px;
            }
    
            .wrap button {
                display: block;
                width: 100px;
                height: 100px;
                background-color: #000;
                color: orange;
                text-align: center;
                border-radius: 50%;
                font-size: 30px;
                line-height: 100px;
                margin: 30px auto;
                outline: none;
                border: none;
            }
    
            .wrap p:nth-last-child(2) {
                text-align: center;
                font-size: 20px;
            }
            .wrap p:nth-last-child(2) span{
                color: blue;
            }
    
    
            .wrap p:last-child {
                text-align: center;
                font-size: 20px;
                color: red;
            }
    
            .wrap p:last-child span {
                color: blue;
            }
    
        </style>
    </head>
    
    <body>
        <div class="wrap">
            <h1>倒计时</h1>
            请输入：<input type="text">年<input type="text">月<input type="text">日
            <button>开始</button>
            <p>现在距离-<span>0000</span>-还剩：</p>
            <p><span>00</span>天<span>00</span>时<span>00</span>分<span>00</span>秒</p>
        </div>
        <script>
            /* 
             1. 倒计时:
                        点击开始按钮 清除上一次遗留定时器 开启定时器 计算 当前时间 到输入框中时间的倒计时
                        1.1 点击完成后 清除上一次遗留的定时器
                        1.2 如果只输入 不点击开始 不能计算新的倒计时
            */
            // 1. 获取元素
            var inps = document.getElementsByTagName('input');
            var btn = document.getElementsByTagName('button')[0];
            var ps = document.getElementsByTagName('p');
            var spans = document.getElementsByTagName('span');
            console.log(inps, btn, ps, spans);
    
    
    
    
            // 4.唯一标识
            var t = null;
    
            // 2. 点击开始按钮
            btn.onclick = function () {
                // 3.清除上一次遗留的定时器
                clearInterval(t);
                // 5.2.1获取输入框的值
                var year = inps[0].value;
                var month = inps[1].value;
                var riqi = inps[2].value;
    
                // 解决1s延迟
                auto();
               
                // 5.开启定时器
                t = setInterval(auto, 1000);
                function auto() {
                    // 5.1创建当前时间
                    var cur = new Date();
                    // 5.2创建未来时间
                    console.log(year,month,riqi);
                    var fur = new Date('' + year + ',' + month + ',' + riqi + ',0:0:0');
                    console.log(cur,fur);
                    // 计算差
                    var cha = fur - cur;
    
                    // 秒
                    var ss = parseInt(cha / 1000);
    
                    // 分
                    var mm = parseInt(cha / 1000 / 60 % 60);
    
                    // 时
                    var hh = parseInt(cha / 1000 / 60 / 60 % 24);
    
                    // 天
                    var dd = parseInt(cha / 1000 / 60 / 60 /24)
                    console.log(ss,mm,hh,dd);
    
                    // 赋值到页面
                    spans[0].innerHTML = year +'年'+month+'月'+riqi+'日'
                    spans[1].innerHTML = dd;
                    spans[2].innerHTML = hh;
                    spans[3].innerHTML = mm;
                    spans[4].innerHTML = ss;
                }
    
    
            }
        </script>
    </body>
    
    </html>