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

素颜马尾好姑娘i 2022-12-04 07:44 586阅读 0赞

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

效果：  
![js预览][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>

[js]: /images/20221123/2492b2da4753434b8982b7fc65ab0822.png

发表评论取消回复

表情：

评论列表（有 0 条评论，586人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java播放音频,支持暂停播放停止继续

Java播放音频,支持暂停播放停止继续之前发过一篇关于播放音频的文章，但是占用CPU过高，这里是改进版改进内容修复部分bug CPU占用率减少

快来打我*/ 2022年12月12日 15:22/ 0 赞/ 271 阅读

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

> 一个秒级别计数器：点击“开始"按钮从0开始每隔1秒计数，点击"停止"按钮停止计数。计数停止后，再次点击"开始"按钮继续计数。效果： ![js预览][js] 代码：

素颜马尾好姑娘i/ 2022年12月04日 07:44/ 0 赞/ 587 阅读

相关 uni-app 录音支持暂停、继续(ios、andorid)

uni-app 录音支持暂停、继续(ios、andorid)：[https://ext.dcloud.net.cn/plugin?id=5849][https_ext.dclo

灰太狼/ 2022年09月10日 00:07/ 0 赞/ 252 阅读

相关在ios中运用core animation暂停和继续动画

1. <pre name="code" class="cpp">//暂停layer上面的动画 2. \- (void)pauseLayer:(CALayer\)laye

客官°小女子只卖身不卖艺/ 2022年08月21日 03:18/ 0 赞/ 215 阅读

相关 HTML5超酷秒表动画可暂停和重置秒表

关于[HTML5][]和[CSS3][]的时钟[应用][Link 1]在之前我们已经分享过不少了，还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的

悠悠/ 2022年08月07日 06:39/ 0 赞/ 214 阅读

相关 Android中定时器Timer和TimerTask的启动，停止，暂停，继续等操作实例

下面是一个在Android中使用定时器Timer和TimerTask的启动，停止，暂停，继续等操作的demo。需要注意的问题主要有两点： 1、Timer和TimerTas

Dear 丶/ 2022年06月16日 20:07/ 0 赞/ 687 阅读

相关 js重置伪类样式；js重置affter；js重置before；js动态修改ClassName（兼容IE8及以上）

`js重置伪类样式；js重置affter；js重置before；js动态修改ClassName；（兼容IE8及以上）` html代码： <div id="user_

╰+哭是因爲堅強的太久メ/ 2022年05月27日 00:05/ 0 赞/ 102 阅读

相关 js刷新页面的重置

js刷新页面后实现的功能，刷新页面的方法： 1，reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload(\[bForceGet\])

﹏ヽ暗。殇╰゛Y/ 2022年05月26日 12:26/ 0 赞/ 333 阅读

相关 CocosCreator原生平台退出游戏，暂停和继续

原生平台退出游戏，方法为： cc.director.end(); 官方解释：End the life of director in the next fram

淡淡的烟草味﹌/ 2022年04月03日 07:56/ 0 赞/ 1335 阅读

相关 JS的定时器和清除定时器

在我们的项目开发中，难免会需要按周期执行一些代码，这就需要定时器这个功能。常用的定时器有2种 setTimeout(function() {}, 1000);

亦凉/ 2022年01月21日 12:09/ 0 赞/ 400 阅读