【JavaScript 】定时器开关事件

Bertha 。 2021-10-19 11:40 265阅读 0赞

![在这里插入图片描述][20190428142233854.png]

--------------------

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="d1">0</div>
    
    
    <button id="an1SclBtn">暂停</button>
    
    <script src="../../jQuery-3.3.1.min.js"></script>
    <script>
    
        var topY=0;
    
        function fn1() {
            if(topY>100){
                topY=0;
            }else{
                topY+=0.5;
            }
    
            $("#d1").html(topY);
    
        }
    
    
        var anTimer=setInterval(fn1,1000);
    
    
      $("#an1SclBtn").click(function () {
    
          var content=$(this).html();
          if(content=="暂停"){
              console.log(2);
              clearInterval(anTimer);        //关闭
    
              $(this).html("继续");
          }else{
    
              anTimer=setInterval(fn1,1000);     //继续， anTimer 前面一定不能加 var
    
              $(this).html("暂停");
          }
      })
    
    </script>
    </body>
    </html>

效果图：

![在这里插入图片描述][20190821115759616.gif]

[20190428142233854.png]: /images/20211018/696bb82707734a698b52278d1623b89f.png
[20190821115759616.gif]: /images/20211018/aa8273f9c8c04d5290fe0307e1d0b5c9.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript定时器

JavaScript定时器思考在讨论之前，先来思考一个问题，定时器真的是定时执行的么？首先来看一段代码： console.log('定时器启动前'

梦里梦外;/ 2023年08月17日 17:45/ 0 赞/ 70 阅读

相关 QT定时器事件startTimer

文章目录定时器事件 1、开启一个定时器: 2、关闭定时器 3、定时器事

阳光穿透心脏的1/2处/ 2022年11月21日 14:41/ 0 赞/ 158 阅读

相关 JavaScript定时器解密

在[单线程JavaScript][JavaScript]这篇文章中,在介绍JavaScript单线程的同时，也介绍了setTimeout是如何工作的。但是对于定时器的一些内容，

╰+哭是因爲堅強的太久メ/ 2022年09月27日 06:42/ 0 赞/ 118 阅读

相关 JavaScript定时器示例

JavaScript定时器示例在前端，我们有很多功能需要用到定时器（Timing）。譬如轮询，譬如定时关闭弹框，譬如实现秒表，譬如一段时间后跳转页面等等。因此，我们需要

绝地灬酷狼/ 2022年09月14日 02:27/ 0 赞/ 149 阅读

相关 Nginx 定时器事件

概述在 Nginx 中定时器事件的实现与内核无关。在事件模块中，当等待的事件不能在指定的时间内到达，则会触发 Nginx 的超时机制，超时机制会对发生超时的事件进行管理

拼搏现实的明天。/ 2022年08月06日 11:16/ 0 赞/ 251 阅读

相关 Javascript-定时器

方法1： setInterval( function ()\{\}, time) ; setInterval有俩个参数，前面一个表示执行的语句，后面一个表示间隔的时间（单位

落日映苍穹つ/ 2022年05月27日 13:47/ 0 赞/ 178 阅读

相关 JavaScript 定时器

JavaScript 里有定时器 setInterval(fun,time) / clearInterval() ; 延时器 setTimeout(fun,time) /

谁借莪１个温暖的怀抱￠/ 2022年05月17日 11:40/ 0 赞/ 159 阅读

相关 JavaScript定时器

JavaScript定时器原链接https://www.runoob.com/w3cnote/js-timer.html js定时器有一下两种方法： setInt

短命女/ 2022年01月31日 04:59/ 0 赞/ 185 阅读

相关 javascript实现开关灯

开关灯 <style> body{background: black;cursor: pointer;} .lamp{

向右看齐/ 2022年01月24日 00:47/ 0 赞/ 197 阅读

相关【JavaScript 】定时器开关事件

![在这里插入图片描述][20190428142233854.png] -------------------- <!DOCTYPE html> <html

Bertha 。/ 2021年10月19日 11:40/ 0 赞/ 266 阅读