定时器案例

最新推荐文章于 2024-02-03 13:07:31 发布

weixin_46344421

最新推荐文章于 2024-02-03 13:07:31 发布

阅读量121

点赞数

文章标签： js web

本文链接：https://blog.csdn.net/weixin_46344421/article/details/114378853

版权

今天想写一个定时器测试自己一小时能打多少个字，然鹅技术不够，去看了一下大佬写的计时器后发现不够完善，加以改进后发出来分享一下

<!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>计时器案例</title>
    </head>
    <body>
        <div>
            <span class="h">00</span>
            <span class="m">00</span>
            <span class="s">00</span>
        </div>
        <button id="start">开始</button>
        <button id="stop">停止</button>
        <button id="clean">清零</button>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script>
            let timer = null;   //定时器
            let count = 0;      //计时
            let flag = 1;       //防止多次点击阀门

            //开始按钮
            $("#start").on("click", function () {
                if (flag == 0) return;
                timer = setInterval(() => {
                    count++;
                    console.log(count);
                    $(".s").text(showNum(count % 60));
                    $(".m").text(showNum(parseInt(count / 60) % 60));
                    $(".h").text(showNum(parseInt(count / 60 / 60)));
                }, 1000);
                flag = 0;
                $("#clean").attr("disabled", true);  //点击开始按钮后禁用清零按钮
            });

            //停止按钮
            $("#stop").on("click", function () {
                clearInterval(timer);
                $("#clean").attr("disabled", false);  //点击停止后启用清零按钮
                console.log("停止");
            });

            //清零按钮
            $("#clean").on("click", function () {
                count = 0;           //重置时间
                $(".h").text("00");   //重置页面时间
                $(".m").text("00");
                $(".s").text("00");
                flag = 1;     //点击清零后打开阀门
            });

            //包装时间的函数
            function showNum(num) {
                if (num < 10) {
                    return "0" + num;
                }
                return num;
            }
        </script>
    </body>
</html>

该大佬没有写防止多次点击开始的代码，遂加上，然后发现这样的话在点击清零后还是可以多次点击开始按钮造成bug，遂将清零按钮禁用，详看代码

weixin_46344421

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
定时器案例

今天想写一个定时器测试自己一小时能打多少个字，然鹅技术不够，去看了一下大佬写的计时器后发现不够完善，加以改进后发出来分享一下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name=
复制链接

扫一扫