模态计时器进度条

Question

我有点击按钮时的模态。模式弹出并在计时器启动时关闭，目前为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

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