JS简单的按钮秒表计时器1

最新推荐文章于 2021-12-30 15:42:18 发布

小松鼠绅士

最新推荐文章于 2021-12-30 15:42:18 发布

阅读量674

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript setInterval innerHTML

本文链接：https://blog.youkuaiyun.com/mydreamhope/article/details/54380846

这个博客展示了一个使用JavaScript编写的简单秒表计时器。通过`<input>`按钮控制计时器的开始、暂停和重置。计时器在页面上的一个`<p>`元素中显示，格式为分钟:秒:毫秒。代码利用`setInterval`函数实现定时更新时间，并在`<body>`中定义了三个按钮进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表计时器</title>
    <script>
        window.onload = function () {
            var timeS = document.getElementsByTagName("p")[0];
            var btnStart = document.getElementsByTagName("input")[0];
            var btnPause = document.getElementsByTagName("input")[1];
            var btnReset = document.getElementsByTagName("input")[2];
            var m = 0;
            var ss = 0;
            var k = 0;
            timeS.innerHTML = ((m < 10 ? "0" + m : m ) + ":" + (ss < 10 ? "0" + ss : ss ) + ":" + (k < 10 ? "0" + k : k ));
            //时间函数
            var timeR;

            function timer() {
                k++;
                if (k == 99) {
                    ss += 1;
                    k = 0;
                }
                if (ss == 59) {
                    m += 1;
                    ss = 0;
                }
                timeS.innerHTML = (m < 10 ? "0" + m : m ) + ":" + (ss < 10 ? "0" + ss : ss ) + ":" + (k < 10 ? "0" + k : k );
            }

            //开始
            btnStart.onclick = function () {
                timeR = setInterval(timer, 10)
            };

            //暂停
            btnPause.onclick = function () {
                clearInterval(timeR);
            };

            //复位
            btnReset.onclick = function () {
                clearInterval(timeR);
                 m = 0;
                ss = 0;
                 k = 0;
                timeS.innerHTML = ((m < 10 ? "0" + m : m ) + ":" + (ss < 10 ? "0" + ss : ss ) + ":" + (k < 10 ? "0" + k : k ));
            };
        }
    </script>
</head>
<body>
<div><p></p></div>
<input type="button" value="开始">
<input type="button" value="暂停">
<input type="button" value="复位">
</body>
</html>