为了账号安全,请及时绑定邮箱和手机立即绑定

如何从 HTML 中停止“设置间隔”

如何从 HTML 中停止“设置间隔”

RISEBY 2022-09-23 16:19:44

此代码显示了一个正在增长的间隔计时器。我正在使用setInterval,但我不知道如何停止ist。


有一个叫做恩德()的放克。我可以用这个放克停止间隔计时器吗?


停止它的原因是,当我再次按下按钮(在底部)时,第二个计时器就会启动。我不知道怎么说,测试一下。


```

<!DOCTYPE html>

<html>

  <head>

    <title>Interval Timer</title>

  

    <style>

      @font-face {

        font-family: sevenSegment;

        src: url(SevenSegment.ttf);

      }

    

      h1{

        font-family: sevenSegment;

        font-size: 7em;

        color: #969696;

        line-height: 0%;

      }

      h2{

        font-family: sevenSegment;

        font-size: 5em;

        color: #969696;

        line-height: 0%;

      }


      .container{

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50% );

      }

      

      .button1{

        font-family: sevenSegment;

        font-size: 1em;

        color: #969696;

        

          border: none;

      }

    </style>


  </head>

  <body>

    <div class="container">



      <table>

        <tr>

          <td><h2 id="des">WORK</h2></td>         

        </tr>

        <tr>

          <td><h1 id="count">00:00:45</h1></th>

        </tr>

        <tr>

          <td><h2 id="des">REST</h2></td>

         </tr>

        <tr>

          <td><h1 id="count2">00:00:15</h1></td>

        </tr>

         <tr>

           <td><h2 id="des">Pause</h2></td>

         </tr>

         <tr>

           <td><h1 id="count3">00:00:25</h1></td>

         </tr>

      </table>

      <button class="button1" type="button" id="work">Work</button>

      <button class="button1" type="button" id="rest">Rest</button>

      <button class="button1" type="button" id="pause">Pause</button>

    </div>


   

查看完整描述

1 回答

?
慕尼黑的夜晚无繁华

TA贡献1523条经验 获得超6个赞

将间隔存储在变量中,然后使用该变量停止间隔。但是,由于您在函数内启动区间并在另一个函数内停止它,因此需要使用全局变量。首先声明一个全局变量 x:

var x;

然后,替换:

setInterval(...

由:

x = setInterval(...

要停止间隔,只需致电

clearInterval(x);


查看完整回答
反对 回复 6天前
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信