分、秒、時の進行状況バーを表示するには

Question

私は時間の進行状況バーを持っています。私はこのコードを使用します。この時間バーでは、秒単位で時間が取得されますが、時間経過バーに分、秒、時間を表示します。 percentajeで

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 { 
 
    \t 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

これを試すことができます。私は1時間で、移動を完了したい.suppose 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

（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を使用する必要があり、そのためだと思う：PAUSEで更新

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

<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>

が可能になり、RESUME：

代わりに (percentage/1000).toFixed(2)の印刷

var timeTotal = 5 * minutes, 
 
\t 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) { 
 
     \t \t cFlag = false; 
 
     } 
 

 
     if(Math.floor(time/seconds) == 3*60+30 && !stopped){ // pause at 3 m 30 s 
 
     \t 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; 
 
    \t \t \t \t timePausedStart = 0; 
 
     } 
 
     else { 
 
     \t pause(); 
 
     } 
 
    }); 
 
}); 
 

 
var pause = function(){ 
 
\t \t timePausedStart = new Date().getTime(); 
 
};

#pbar_outerdiv { cursor: pointer; }

<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>

Answer 3

、あなたは単に整数部門

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

続いて所望の値を計算することができますh:m's.ms

にミリ秒であなたの時間を分割するpercentageを使用することができますあなたのintを文字列に変換するのに、ただtoString()を使うことができます。私は0と値を連結し、slice()を使用して最後の2文字だけを保持しました。これにより、時間、分、...を2桁の数字で印刷できます

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