延迟定时器、间隔定时器

2021年9月4日 5点热度 0条评论 来源: 星屿H

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

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

        语法: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>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid green;
            position: fixed;
            bottom: 10px;
            right: 10px;
            display: none;
        }

        button {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>

<body>
    <div><button>X</button></div>
    <script>
        /* 
            在页面加载完成后 等待3s 显示div
            点击按钮 关闭div后 在等待3s 显示div 
        */
        // 在页面加载完成后 等待3s 显示div
        // 获取元素
        var div = document.getElementsByTagName('div')[0];
        console.log(div);
        // 延迟定时器 setTimeout(函数,时间);
        setTimeout(function () {
            div.style.display = 'block';
        }, 3000);
        // 点击按钮 关闭div后 在等待3s 显示div 
        // 获取元素
        var btn = document.getElementsByTagName('button')[0];
        console.log(btn);
        // 点击按钮 关闭div
        btn.onclick = function (){
            div.style.display = 'none';
            setTimeout(function () {
                div.style.display = 'block';
            },3000);
        };
    </script>
</body>

</html>

 间隔定时器实现倒计时

        代码实现:

<!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>

    原文作者:星屿H
    原文地址: https://blog.csdn.net/qq_48294048/article/details/120101498
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。