如何顯示分鐘，秒，小時進度條

我有一個時間進度條。我使用這個代碼。在這個時間欄中，我可以在幾秒鐘內得到時間，但是我想在時間進度條中顯示分鐘，秒鐘，小時。如何顯示分鐘，秒，小時進度條

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

來源

2016-09-21 aswathy

您可以試試這個。 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; }

來源

2016-09-21 09:47:22

感謝它的工作，還有一個疑問，假設我想在特定時間停止酒吧運動，如（0h，0m，30s）我在代碼 – aswathy

中完成的更改可以聲明var min = 0，sec = 0，hr = 0;全球。並在animateUpdate（）函數中檢查它。像函數animateUpdate（）{var 0c = new Date（）。getTime（） - timeStart;如果（hr == 0 && min == 0 && sec == 5）{return;} if（perc

檢查http://jsfiddle.net/7gb5k3ga/ –

隨着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：

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：

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>

來源

2016-09-21 08:15:05

我怎麼能控制桿的速度.suppose我想完成一個小時的運動。現在只需2秒 – aswathy

將'timeTotal'改爲'1 * hours'。你已將timeTotal設置爲2500（兩秒和一半）。 –

感謝它的工作，還有一個疑問，假設我想要在特定時間停止酒吧移動（如0h，3m，30s）我在代碼中完成的更改 – aswathy

而不是打印(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);

來源

2016-09-21 08:46:47

如何顯示分鐘，秒，小時進度條

回答

相關問題