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

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/

Answer 2

检查this JSFiddle。您可以根据需要调整CSS：颜色，大小等。

基本上我将#pbar_innerdiv之外的文字放在span框中。

<div id="pbar_outerdiv">
   <div id="pbar_innerdiv"></div>
   <span id="pbar_innertext">Click!</span>
</div>

修改

所以我编辑了脚本，我希望它现在符合您的需求：JSFiddle Link。这是我使用的脚本：

    var timer = 0,
    perc = 0,
    percIncreaser,
    timeTotal = 2500, //Only change this value time according to your need
    timeCount = 1,
    secondsCount=0,
    cFlag;

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

function animateUpdate() {
    if(perc < timeTotal) {
        perc+=percIncreaser;
        secondsCount+=10;
        updateProgress(perc,secondsCount);
        if(perc>=100) clearTimeout(timer);
        else timer = setTimeout(animateUpdate, timeCount);
    }
}
$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        percIncreaser = 100/timeTotal*10;
        if (cFlag == undefined) {
            clearTimeout(timer);
            perc = 0;
            cFlag = true;
            animateUpdate();
        }
        else if (!cFlag) {
            cFlag = true;
            animateUpdate();
        }
        else {
            clearTimeout(timer);
            cFlag = false;
        }
    });
 });