一个按钮控制定时器的开始与暂停

人间小美味695

已于 2022-11-18 20:25:15 修改

阅读量3.4k

点赞数 44

分类专栏：前端 # JavaScript 文章标签：新星计划 javascript 定时器

于 2021-06-23 22:16:16 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/118163321

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 7 订阅

订阅专栏

前端

25 篇文章 8 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>一个按钮控制定时器的开始与暂停</title>
    <script type="text/javascript">
        var intervalId;
        var i = 0;
        var count = 0;

        function startTime() {
            var hour = document.getElementById("hour");
            var minute = document.getElementById("minute");
            var second = document.getElementById("second");
            var ms = document.getElementById("ms");
            var buttonEle = document.getElementById("start");


            if (i % 2 == 0) {
                buttonEle.innerHTML = "暂停计时";
                intervalId = setInterval(function() {
                    count += 1;
                    var thehour = parseInt(count / 360000);
                    var theminute = parseInt(count / 6000 % 60);
                    var thesecond = parseInt(count / 100 % 60);
                    var thems = parseInt(count % 100);

                    if (thehour >= 10) {
                        hour.innerHTML = thehour + " ";
                    } else {
                        hour.innerHTML = "0" + thehour + " ";
                    }

                    if (theminute >= 10) {
                        minute.innerHTML = theminute + " ";
                    } else {
                        minute.innerHTML = "0" + theminute + " ";
                    }

                    if (thesecond >= 10) {
                        second.innerHTML = thesecond + " ";
                    } else {
                        second.innerHTML = "0" + thesecond + "  ";
                    }
                    if (thems >= 10) {
                        ms.innerHTML = thems + "&nbsp;";
                    } else {
                        ms.innerHTML = "0" + thems + "&nbsp;";
                    }
                }, 10)
            } else {
                buttonEle.innerHTML = "开始计时";
                clearInterval(intervalId);
            }
            i++;
        }
    </script>
    <style type="text/css">
        body,
        html {
            background: violet;
            /*position: relative;*/
        }
        
        #firstDiv {
            height: 50%;
            width: 50%;
            position: absolute;
            margin-left: 350px;
            margin-top: 150px;
            background: #ffcccc;
        }
        
        #twoDiv {
            height: 200px;
            width: 100%;
            position: absolute;
            margin-top: 130px;
            margin-left: 130px;
            ;
        }
        
        span {
            font-size: 30px;
        }
        
        button {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="firstDiv">
        <div id="twoDiv">
            <span><span id="hour">00&nbsp;</span>时</span>
            <span><span id="minute">00&nbsp;</span>分</span>
            <span><span id="second">00&nbsp;</span>秒</span>
            <span><span id="ms">00&nbsp;</span>毫秒</span>

            <button id="start" onclick="startTime()">开始计时</button>
        </div>
    </div>
</body>

</html>