（25）2021-01-07（定时器）

最新推荐文章于 2024-01-04 12:37:45 发布

weixin_53125613

最新推荐文章于 2024-01-04 12:37:45 发布

阅读量257

点赞数

本文链接：https://blog.csdn.net/weixin_53125613/article/details/112306825

版权

定时器

- 一、定时器

一、定时器

1、定时器种类

在js中定时器有两种
（1）setInterval()
（2）setTimeout()

(1)、setInterval()

可以执行无数次。
格式：var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);
【注意】执行语句：可以写执行的代码，也可以直接传入函数。
返回值：启动定时器时，系统分配的编号
关闭定时器的方式：
1.关闭页面。
2.clearInterval(变量名);
【注意】 clearInterval函数需要一个参数：定时器的编号（即变量名）。

    <script>
        // 1000 表示毫秒数， 1000 毫秒 = 1 s       
        // var timer1 = setInterval("refresh()", 1000);  //这种写法也可以
        var timer1 = setInterval(refresh, 1000); //(每隔多久运行一次，可以运行无数次)
        var i = 1;

        function refresh() {
            console.log(i);
            i++;
            if (i == 10) {
                clearInterval(timer1);
            }
        }
    </script>

在控制台上，每秒出现一个字，直到9停止。
在这里插入图片描述

(2)、setTimeout（）

只在指定时间后执行一次。
格式：var 变量名 = setTimeout(“执行的语句”,延迟时间);
关闭定时器的方式：clearTimeout(变量名);
【注意】 clearTimeout函数需要一个参数：定时器的编号（即变量名）。

    <script>
        // 1000 表示延迟时间，
        var timer2 = setTimeout(helloWorle, 1000); //只执行一次。
        function helloWorle() {
            alert("Hello World!");
        }
        // clearTimeout(timer2);     //注释放开之后，定时器就不会执行了。
    </script>

在这里插入图片描述

2、制作时钟

    <title>Document</title>
    <!-- <script src="../001js文件夹/tool.js"></script> -->
    <script>
        // 没有名字的函数，我们叫做匿名函数
        window.onload = function() {
            //第一部分：显示时间为2021年01月07日 星期四 18:51:46格式。
            
            // 定义函数
            function showTime(d) {
                // 获取年
                var year = d.getFullYear();
                // 获取月
                var month = d.getMonth() + 1;
                // 获取日
                var date = d.getDate();
                // 小时数
                var hours = d.getHours();
                // 获取分钟数
                var m = d.getMinutes();
                // 获取秒数
                var seconds = d.getSeconds();
                // 获取星期几
                var day = d.getDay();
                var str = year + "年" + doubleNum(month) + "月" + doubleNum(date) +
                 "日  星期" + numToChinese(day) + " " + doubleNum(hours) + ":" + doubleNum(m) 
                 + ":" + doubleNum(seconds);
                return str;
            }

            // 给小于10的前面补0
            function doubleNum(n) {
                if (n < 10) {
                    return "0" + n;
                } else {
                    return n;
                }
            }
            //星期几： 数字转中文
            function numToChinese(num) {
                var arr = ["日", "一", "二", "三", "四", "五", "六"];
                return arr[num];
            }

            //第二部分：利用第一部分的showTime函数，制作实时显示当前时间的时钟。

            setInterval(showDate, 1000);
            var box = document.getElementById("box");

            function showDate() {
                box.innerHTML = showTime(new Date());
            }
        }
    </script>
</head>


<body>
    <div id="box">

    </div>

</body>

时钟每秒钟都会更新当前时间。
在这里插入图片描述

3、制作秒表

    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            margin: 10px auto;
            width: 400px;
        }
        
        span {
            font-size: 60px;
        }
        
        button {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            font-size: 24px;
            margin: 0 48px;
            border: none;
            /* border:0; */
            outline: none;
            cursor: pointer;
        }
        
        #showTime {
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
    <script>
        window.onload = function() {
            // 分钟数
            var min = 0;
            // 秒数
            var sec = 0;
            // 毫秒数*10
            var ms = 0;
            // 定时器ID
            var timer = null;
            // 获取页面上所有span标签，返回类数组（伪数组）
            var spans = document.getElementsByTagName("span");

            //获取html中id
            function $(str) {
                return document.getElementById(str);
            }

            // 复位按钮，点击事件
            $("resetBtn").onclick = function() {
                // 把分钟，秒，毫秒都清零
                min = 0;
                sec = 0;
                ms = 0;

                clearInterval(timer);
                $("startBtn").innerHTML = "开始";
                spans[0].innerHTML = "00";
                spans[2].innerHTML = "00";
                spans[4].innerHTML = "00";

            }

            // 第二个按钮，点击事件
            $("startBtn").onclick = function() {
                // 点击“开始”按钮
                // 1、启动定时器
                // 2、将按钮的文本修改为“停止”
                if ($("startBtn").innerHTML == "开始") {
                    $("startBtn").innerHTML = "停止";
                    //  防止出现bug，最好在启动定时器之前，先清除定时器。
                    clearInterval(timer);
                    timer = setInterval(show, 10);
                } else {
                    // 点击“停止”按钮
                    // 1、停止计时器
                    // 2、将按钮的文本修改为“开始”
                    $("startBtn").innerHTML = "开始";
                    clearInterval(timer);
                }
            }

            // 生成时间（每10ms执行一次）
            function show() {
                // ms加一
                ms++;
                // 如果等于100，则秒数进1
                if (ms == 100) {
                    sec++;
                    ms = 0;
                }
                // 秒数等于60，则分钟数进1，秒数等于0
                if (sec == 60) {
                    min++;
                    sec = 0;
                }
                // 为了给小于10的补0
                var msStr = ms;
                if (ms < 10) {
                    msStr = "0" + ms;
                }
                var secStr = sec;
                if (sec < 10) {
                    secStr = "0" + sec;
                }
                var minStr = min;
                if (min < 10) {
                    minStr = "0" + min;
                }
                spans[0].innerHTML = minStr;
                spans[2].innerHTML = secStr;
                spans[4].innerHTML = msStr;
            }
        }
    </script>
</head>

<body>
    <div class="box">
        <div id="showTime">
            <span>00</span>
            <span>:</span>
            <span>00</span>
            <span>:</span>
            <span>00</span>
        </div>
        <div class="btn">
            <button id="resetBtn">复位</button>
            <button id="startBtn">开始</button>
        </div>
    </div>
</body>

点击”开始“按钮：开始计时，”开始“按钮变为”停止“。
点击”停止“按钮：停止计时，”停止“按钮变为”开始“。
点击”复位“按钮：停止计时，按钮变为”开始“。

在这里插入图片描述

4、限时秒杀

    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .flashsale-countdown {
            box-sizing: border-box;
            width: 234px;
            height: 300px;
            background-color: aquamarine;
            border-top: 2px solid #ef3a3b;
            margin: 0 auto;
            margin-top: 100px;
            padding-top: 40px;
            text-align: center;
        }
        
        .round {
            width: 100%;
            height: 46px;
            box-sizing: border-box;
            padding-top: 15px;
            font-size: 21px;
            color: #ef3a3b;
        }
        
        img {
            width: 34px;
            height: 53px;
            margin: 25px auto;
        }
        
        .desc {
            width: 100%;
            height: 22px;
            font-size: 15px;
            color: rgba(0, 0, 0, 0.54);
        }
        
        .countDown {
            margin-top: 28px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        
        span:nth-child(1),
        span:nth-child(3),
        span:nth-child(5) {
            width: 46px;
            height: 46px;
            background-color: #605751;
            color: #fff;
            font-size: 24px;
            line-height: 46px;
        }
        
        span:nth-child(2),
        span:nth-child(4) {
            width: 15px;
            height: 46px;
            line-height: 46px;
            color: #605751;
            font-size: 28px;
        }
    </style>
    <script>
        window.onload = function() {

            var todayTime = new Date();
            var tomorrowTime = new Date("2021-01-08 12:00:00");
            var T1 = Date.parse(new Date());
            var T2 = Date.parse(tomorrowTime);
            //获取时间差的秒数(取整数)
            var T0 = parseInt((T2 - T1) / 1000);

            var sec = T0 % 60;
            var min = parseInt(T0 / 60) % 60;
            var hours = parseInt((T0 / 60) / 60);

            var spans = document.getElementsByTagName("span");
            spans[0].innerHTML = hours;
            spans[2].innerHTML = min;
            spans[4].innerHTML = sec;

            timer = setInterval(show, 1000);

            function show() {
                sec--;
                if (sec < 0) {
                    sec = 59;
                    min--;

                }
                if (min < 0) {
                    min = 59;
                    hours--;
                }
                if (hours < 0) {
                    hours = 0;
                    min = 0;
                    sec = 0;
                    clearInterval(timer);
                    document.getElementsByClassName("desc").innerHTML = "该场次已结束";
                }

                spans[0].innerHTML = hours < 10 ? "0" + hours : hours;
                spans[2].innerHTML = min < 10 ? "0" + min : min;
                spans[4].innerHTML = sec < 10 ? "0" + sec : sec;
            }
        }
    </script>
</head>

<body>
    <div class="flashsale-countdown">
        <div class="round">12:00 场</div>
        <img src="data:img/jpg;base64,....." alt="小米闪购">
        <div class="desc">距离结束还有</div>
        <div class="countDown">
            <span>00</span>
            <span>:</span>
            <span>00</span>
            <span>:</span>
            <span>00</span>
        </div>
    </div>
</body>