为什么进度条与倒计时分开工作

Question

我想创建进度条倒计时。但问题是小数点不会像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);

Answer 1

您需要从if语句中取出document.getElementById('counting').innerHTML = reverse_count;，如下所示：

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>

Answer 2

您刚刚在错误的位置添加了正确的语句。每次执行间隔回调时，也应该更新倒计时标签，就像更新<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>

Answer 3

在您的代码中倒计时更新iff 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>