Javascript действие при завершении индикатора выполнения (HTML5) - PullRequest
Новая
       39

Javascript действие при завершении индикатора выполнения (HTML5)

0 голосов
/ 30 апреля 2020

Я добавил таймер, используя 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);
}

Ответы [ 2 ]

1 голос
/ 30 апреля 2020

Я надеюсь, что это работает для вас. Воспроизведение, пауза, стоп 

<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>
1 голос
/ 30 апреля 2020

Чтобы остановить любой таймер, вы можете использовать глобальную переменную и называть ее как угодно, чтобы вы могли запускать и отменять таймер в любое время. поэтому я создаю функцию, которая отменяет таймер в зависимости от этой глобальной переменной, как я упоминал ранее. 

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