Javascript 进度条（HTML5）结束时的动作

Question

我使用 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);
}

Answer 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);
}

Answer 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>

Javascript 进度条（HTML5）结束时的动作

Javascript action when progress bar (HTML5) is over

javascript

progress