Question

我有时间进度条。我用这个代码。在这个时间栏中，我在几秒钟内得到时间，但我想在时间进度条中显示分钟，秒，小时。

var timer = 0,
    timeTotal = 2500,
    timeCount = 20,
    timeStart = 0,
    cFlag;

function updateProgress(percentage) {
    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').css("left", x + "%").text((percentage / 1000).toFixed(2) + "\00a0s");
}

function animateUpdate() {
    var perc = new Date().getTime() - timeStart;
    if(perc < timeTotal) {
        updateProgress(perc);
        timer = setTimeout(animateUpdate, timeCount);
    } else {
    	  updateProgress(timeTotal);
    }
}

$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        if (cFlag == undefined) {
            clearTimeout(timer);
            cFlag = true;
            timeStart = new Date().getTime();
            animateUpdate();
        }
        else if (!cFlag) {
            cFlag = true;
            animateUpdate();
        }
        else {
            clearTimeout(timer);
            cFlag = false;
        }
    });
});

jsfiddle.net/McNetic/hnfRe/397

Answer 1

你可以试试这个。 DEMO LINK HERE

<div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
<div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; height: 100%; color: black; font-weight: bold; text-align: center;">0&nbsp;s</div>
</div>

<p>Click once to start!</p>
<p>Click again to toggle Start/Stop</p>

... JS

var timer = 0,
    timeTotal = 250000,
    timeCount = 20,
    timeStart = 0,
    cFlag;

function updateProgress(percentage) {
    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);
        var totalSec= (percentage / 1000);
         var min = parseInt(totalSec/60);
         var sec = parseInt(totalSec%60);
         var hr= parseInt(min/60);
          min = parseInt(min % 60);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').css("left", x + "%").text(hr+":"+min+":"+sec + "");
}

function animateUpdate() {
    var perc = new Date().getTime() - timeStart;
    if(perc < timeTotal) {
        updateProgress(perc);
        timer = setTimeout(animateUpdate, timeCount);
    } else {
          updateProgress(timeTotal);
    }
}

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

... CSS

#pbar_outerdiv { cursor: pointer; }

Answer 2

使用percentaje（第11行）：

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

SEE DEMO

小时，分钟和秒：

var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

function updateProgress(percentage) {

    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').css("left", x + "%").text( Math.floor(percentage/hours) + 'h ' +  Math.floor(percentage/minutes) + 'm ' +  Math.floor(percentage/seconds) + 's');
}

SEE DEMO.

我认为你应该使用requestAnimationFrame：

＆＃13;

var timeTotal = 2500,
    timeStart = 0,
    cFlag = false;

var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

function updateProgress() {

    var time = new Date().getTime() - timeStart;
    var x = (time/timeTotal)*100,
        y = x.toFixed(3);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').css("left", x + "%").text( Math.floor(time/hours) + 'h ' +  Math.floor(time/minutes) + 'm ' +  Math.floor(time/seconds) + 's');
    
    if(time <= timeTotal && cFlag) {
        requestAnimationFrame(updateProgress);
    }
}

$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        if (cFlag === false) {
            cFlag = true;
            timeStart = new Date().getTime();
            updateProgress();
        }
        else {
            cFlag = false;
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
<div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; height: 100%; color: black; font-weight: bold; text-align: center;">0h 0m 0s</div>
</div>

<p>Click once to start!</p>
<p>Click again to toggle Start/Stop</p>

＆＃13;

使用暂停允许和恢复更新

＆＃13;

var timeTotal = 5 * minutes,
	  timePaused = 0,
    timePausedStart = 0,
    timeStart = 0,
    cFlag = false,
    stopped = false;

var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

function updateProgress() {
    
    if( !timePausedStart ) { // if not paused
      var time = new Date().getTime() - timeStart - timePaused;
      
      var x = (time/timeTotal)*100,
          y = x.toFixed(3);
      $('#pbar_innerdiv').css("width", x + "%");
      $('#pbar_innertext').css("left", x + "%").text( Math.floor(time/hours%24) + 'h ' +  Math.floor(time/minutes%60) + 'm ' +  Math.floor(time/seconds) + 's');

      if(time > timeTotal) {
      		cFlag = false;
      }

      if( Math.floor(time/seconds) == 3*60+30 && !stopped){ // pause at 3 m 30 s
      	stopped = true;
        pause();      
      }
    }
    
    if( cFlag )
      requestAnimationFrame(updateProgress);
}

$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        if (cFlag === false) {
            cFlag = true;
            timeStart = new Date().getTime();
            timePaused = 0;
            updateProgress();
        } else if( cFlag === true && timePausedStart ){ // reset pause
            timePaused += new Date().getTime() - timePausedStart;
    				timePausedStart = 0;
        }
        else {
        	  pause();
        }
    });
});

var pause = function(){
		timePausedStart = new Date().getTime();
};

＆＃13;

#pbar_outerdiv { cursor: pointer; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
<div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; height: 100%; color: black; font-weight: bold; text-align: center;">0h 0m 0s</div>
</div>

<p>Click once to start!</p>
<p>Click again to toggle Start/Stop</p>

＆＃13;

Answer 3

您可以使用(percentage / 1000).toFixed(2)将时间（以毫秒为单位）分摊到percentage

，而不是打印h:m's.ms

您只需使用整数除法计算所需的值

h  = Math.floor(percentage / 3600000);
m  = Math.floor((percentage - h * 3600000) / 60000);
s  = Math.floor((percentage - h * 3600000 - m * 60000) / 1000);
ms = Math.floor(percentage - h * 3600000 - m * 60000 - s * 1000);

然后，您可以使用toString()将int转换为字符串。我将值与0连接在一起，并使用slice()仅保留最后两个字符。这允许您以两位数格式打印小时，分钟......

text = ("0" + h.toString() ).slice(-2) + ":"  +
       ("0" + m.toString() ).slice(-2) + "'"  +
       ("0" + s.toString() ).slice(-2) + "\"" +
       ("0" + ms.toString()).slice(-2);

如何显示分钟，秒，小时进度条

3 个答案: