JS定时器，可以暂停、继续和重置

最新推荐文章于 2025-03-28 15:30:47 发布

一碗单炒饭

最新推荐文章于 2025-03-28 15:30:47 发布

阅读量1.8w

点赞数 11

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/djzhao627/article/details/108431803

版权

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的秒级计数器实现方案，通过HTML和JavaScript创建，具备开始、停止和重置功能，适用于网页应用中实时计数的场景。

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

一个秒级别计数器：点击“开始"按钮从0开始每隔1秒计数，点击"停止"按钮停止计数。计数停止后，再次点击"开始"按钮继续计数。

效果：
js预览

代码：

<button onclick="myCounter.startCount()">开始</button>
<input id="counter" type="text" readonly="readonly">
<button onclick="myCounter.stopCount()">停止</button>
<button onclick="myCounter.resetCount()">重置</button>

<script>
    var myCounter = (function () {
        var step = 0;
        var intervalId = null;
        function count() {
            document.getElementById("counter").value = step;
            step = step + 1;
        }
        function start() {
            if (intervalId == null) {
                count();
                intervalId = setInterval(count, 1000);
            }
        }
        function stop() {
            clearInterval(intervalId);
            intervalId = null;
        }
        function reset() {
            stop();
            step = 0;
            document.getElementById("counter").value = "";
        }
        return { startCount: start, stopCount: stop, resetCount: reset }
    })()
</script>