模态计时器进度条答案

【问题标题】：Modal timer progress bar模态计时器进度条
【发布时间】：2019-04-02 05:44:39
【问题描述】：

我有一个用于单击按钮时的模式。当计时器到时，模式弹出并关闭，当前为 5 秒。但是，我想创建一个进度条来显示计时器正在下降，没有数字只是一个移动的条。

这是我已经拥有的：https://jsfiddle.net/cde2cup0/。您必须单击模式的“管理”按钮。

这就是我想要实现的目标。我知道我的 Photoshop 技能不准确，我很着急：

底部的白色条是进度条。

我确实尝试过，但不适合我需要的东西，所以没有用。

var start = new Date();
var maxTime = 835000;

var timeoutVal = Math.floor(maxTime/100);

animateUpdate();

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%");
    $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
    var now = new Date();
    var timeDiff = now.getTime() - start.getTime();
    var perc = Math.round((timeDiff/maxTime)*100);
      if (perc <= 100) {
       updateProgress(perc);
       setTimeout(animateUpdate, timeoutVal);
      }
}

参考：jQuery progress timer bar

【问题讨论】：

使用或 html 元素

标签： javascript jquery css timer

【解决方案1】：

我不知道您是否正确理解了您的问题，但希望对您有所帮助：

小提琴：https://jsfiddle.net/cde2cup0/2/

var progressBar = document.getElementById('myProgressBar');
function setAnimation(timeInSeconds, callbackFunction) {
    var count = 0;
    var interval = setInterval(function() {
        if (count == timeInSeconds) {
            callbackFunction();
            clearInterval(interval);
        }
        progressBar.style.width = (100 * count / timeInSeconds) + '%';
        count++;
    }, 1000);
};

【讨论】：