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

素颜马尾好姑娘i 2022-12-04 07:44 598阅读 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 条评论，598人围观）

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

相关阅读

相关 java控制一套动效图播放、暂停和重置的方法

UI 出一套动效图一般来说有25张左右，如何控制这些图片自动的依次循环播放且能随时暂停和重置呢？我在看别人代码时看到了这样一个方法： 1.在 drawable 目录

一时失言乱红尘/ 2024年02月17日 19:58/ 0 赞/ 35 阅读

相关 Java-定时器(内置-自定义(普通,分布式)可以切换)

使用Timer和TimerTask存在一些缺陷： 1.Timer只创建了一个线程。当你的任务执行的时间超过设置的延时时间将会产生一些问题。 2.Timer创建的线程没

短命女/ 2023年10月02日 17:58/ 0 赞/ 3 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 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 赞/ 106 阅读

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

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

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

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

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

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