如何在 JavaScript 中为 Bootstrap 进度条添加计时器

Question

我有一个带进度条的计时器，计时器工作正常。但我想让进度条跟随计时器移动。我正在使用Bootstrap进度条。如果我从函数中删除bar变量，计时器可以正常工作，但是加上进度条后它就停止工作了。有什么建议吗？谢谢 :)

function startTimer(duration, display, bar) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        bar.css('width', minutes + '%');

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var minutes = 60 * 15,
    display = document.querySelector('#time');
    bar = document.querySelector('#progressBar');
    startTimer(minutes, display, bar);
};

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="progress mx-auto mb-2" style="max-width: 300px;">
    <div class="progress-bar bg-success" role="progressbar" id="progressBar" style="width: 100%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span id="time">15:00</span>

- user13103325

Answer 1

使用bar.style.width，.css()是一个jQuery函数。

为了正确的百分比，计算总共和剩余的秒数，并基于此设置进度条宽度。

function startTimer(duration, display, bar) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);
        
        var totalSeconds = 15 * 60
        , remainingSeconds = minutes * 60 + seconds
        
        bar.style.width = (remainingSeconds*100/totalSeconds) + "%";
        
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var minutes = 60 * 15,
    display = document.querySelector('#time');
    bar = document.querySelector('#progressBar');
    startTimer(minutes, display, bar);
};

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="progress mx-auto mb-2" style="max-width: 300px;">
    <div class="progress-bar bg-success" role="progressbar" id="progressBar" style="width: 100%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span id="time">15:00</span>

- Anurag Srivastava

---

谢谢。这个可以运行。但是有没有想法如何让进度条随计时器移动呢？例如，现在计时器是15分钟。15分钟后它应该为空。 - user13103325

它能跑起来但有些小毛病。它从10000%开始，但在中途，它会从50%变成5000%。你知道为什么吗？ - user13103325

将计算百分比的部分移到将值转换为字符串的部分之上，这是导致问题的原因。查看编辑。 - Anurag Srivastava