почему прогрессбар работает отдельно от обратного отсчета - PullRequest
Новая
       24

почему прогрессбар работает отдельно от обратного отсчета

0 голосов
/ 08 сентября 2018

Я хочу создать индикатор выполнения.Но проблема в том, что десятичные дроби не меняются как 10 9 8 7 .. одновременно.

это html: 

<progress id="prg" value ="0" max="10"></progress>
<p id="counting">10</p>

Это мой js-скрипт: 

var reverse_count = 10;
var downloadTimer = setInterval(function(){
    document.getElementById('prg').value = 10 - --reverse_count;
    if(reverse_count <= 0) {
        clearInterval (downloadTimer); 
        document.getElementById('counting').innerHTML = reverse_count;
    }
}, 1000);

Ответы [ 3 ]

0 голосов
/ 08 сентября 2018

В вашем коде обратный отсчет обновляется, если reverse_count <= 0. 

var reverse_count = 10;
var downloadTimer = setInterval(function(){
  document.getElementById('prg').value = 10 - --reverse_count;
  document.getElementById('counting').innerHTML = reverse_count;
  if(reverse_count <= 0) {
    clearInterval (downloadTimer);
  }
}, 1000);
<progress id="prg" value ="0" max="10"></progress>
<p id="counting">10</p>
0 голосов
/ 08 сентября 2018

Вы только что добавили правильное утверждение в неправильном месте. Обновление метки обратного отсчета также следует выполнять каждый раз при выполнении интервального обратного вызова, как вы делаете это с обновлением <progress> value, а не только один раз перед вызовом clearInterval: 

const progressBar = document.getElementById('progressBar');
const countdownLabel = document.getElementById('countdownLabel');

let countdown = 10;

const downloadTimer = setInterval(() => {
  // This is executed multiple times until the interval is cleared:
  countdownLabel.innerHTML = --countdown;
  progressBar.value = 10 - countdown;
  
  if (countdown <= 0) {
    // This is only executed once when the countdown gets to 0:
    clearInterval(downloadTimer); 
  }
}, 1000);
<progress id="progressBar" value ="0" max="10"></progress>
<p id="countdownLabel">10</p>
0 голосов
/ 08 сентября 2018

Вам нужно взять document.getElementById('counting').innerHTML = reverse_count; из оператора if, вот так: 

var reverse_count = 10;

var downloadTimer = setInterval(function() {
  document.getElementById('prg').value = 10 - --reverse_count;
  if (reverse_count <= 0) {
    clearInterval(downloadTimer);
  }
  document.getElementById('counting').innerHTML = reverse_count;
}, 1000);
<progress id="prg" value="0" max="10"></progress>
<p id="counting">10</p>
...