进度条 (HTML5) 结束时的 Javascript 操作答案

【问题标题】：Javascript action when progress bar (HTML5) is over进度条 (HTML5) 结束时的 Javascript 操作
【发布时间】：2020-04-30 20:04:47
【问题描述】：

我使用 HTML5 进度条添加了一个计时器。单击按钮时，将使用以下功能设置栏。它工作得很好，但我想添加的是在进度结束时触发一个动作，并且还能够在单击另一个按钮时停止进度。

<progress value="0" max="40" id="pbar" ></progress>
   <div id="start-stop">
       <button id="start" onclick="start_countdown()">Start</button>
       <button id="stop">Stop</button>
   </div>
...
function start_countdown(){
    var reverse_counter = 40;
    var downloadTimer = setInterval(function(){
    document.getElementById('pbar').value = 40 - --reverse_counter;
    if(reverse_counter <= 0)  
    clearInterval(downloadTimer);
    },1000);
}

【问题讨论】：

嗨，这似乎是 stackoverflow.com/questions/41424989/… 的副本

标签： javascript progress

【解决方案1】：

为了停止任何计时器，您可以使用全局变量并将其命名为您想要的任何名称，这样您就可以随时触发和取消计时器。所以我创建了一个函数，它根据我之前提到的全局变量取消计时器。

<progress value="0" max="40" id="pbar" ></progress>
<div id="start-stop">
  <button id="start" onclick="start_countdown()">Start</button>
  <button id="stop" onClick="clearinterval()">Stop</button>
</div>
var interval;
function start_countdown(){
  var reverse_counter = 40;
  interval= setInterval(function(){
  document.getElementById('pbar').value = 40 - --reverse_counter;
  if(reverse_counter <= 0)  
    clearInterval(interval);
   },1000);
 }
function clearinterval (){
  clearInterval(interval);
}

【讨论】：

感谢这非常适合阻止进度！当进度结束时触发一个动作呢？（并没有通过点击停止手动结束）
您可以声明一个布尔变量，您可以在清除间隔后使其为真，如果该变量仅触发任何函数，并在完成回调函数后再次使其为假
你的意思是：` if(reverse_counter if (over === true) { alert('...'); } 因为它似乎不起作用

【解决方案2】：

我希望这对你有用。播放、暂停、停止

<progress value="0" max="40" id="pbar" ></progress>
<div id="start-stop">
  <button id="start" onclick="start_countdown()">Start</button>
  <button id="stop" onclick="pause_countdown()">Pause</button>
  <button id="stop" onclick="stop_countdown()">Stop</button>
</div>

<script type="text/javascript">

  var downloadTimer;
  var reverse_counter = 40;
  function start_countdown(){
      downloadTimer = setInterval(function(){
        document.getElementById('pbar').value = 40 - --reverse_counter;
        if(reverse_counter <= 0) {  
          clearInterval(downloadTimer);
        }
      },1000);
      console.log(reverse_counter);
  }

  function stop_countdown(){
      reverse_counter = 0;
      document.getElementById('pbar').value = 0;
      window.clearInterval(downloadTimer);
      reverse_counter = 40;
  }

  function pause_countdown(){
      window.clearInterval(downloadTimer);
  }

</script>

【讨论】：