javascript - 如何在时间进度条中放置时间显示框

Question

我有时间进度条。我使用这个代码。我需要蓝色盒子里的时间赛跑者。

我该如何解决，意味着黄色条何时移动取决于时间需要时间

展示框。

var timer = 0,
    perc = 0,
    timeTotal = 2500,
    timeCount = 1,
    cFlag;

function updateProgress(percentage) {
    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').text(y + "%");
}

function animateUpdate() {
    if(perc < timeTotal) {
        perc++;
        updateProgress(perc);
        timer = setTimeout(animateUpdate, timeCount);
    }
}

$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        if (cFlag == undefined) {
            clearTimeout(timer);
            perc = 0;
            cFlag = true;
            animateUpdate();
        }
        else if (!cFlag) {
            cFlag = true;
            animateUpdate();
        }
        else {
            clearTimeout(timer);
            cFlag = false;
        }
    });
}); 

#pbar_outerdiv { cursor: pointer; }

Answer 1

您已经在 updateProgress() 方法中获得了实际时间，因此只需更改设置百分比的行即可:

$('#pbar_innertext').text((percentage / 100).toFixed(2) + " s");

JSFiddle:https://jsfiddle.net/McNetic/hnfRe/395/

编辑:使用不同的浏览器，我现在看到下一个问题:动画花费的时间可能比宣传的 2500 毫秒长得多(因为每秒 1000 帧的更新频率非常高)。所以你应该少做动画帧并根据实际时间测量计算百分比，如下所示:

https://jsfiddle.net/McNetic/hnfRe/396/