循環通過具有可調節環路24小時內

我的目標是創建一個循環從00:00:0023:59:59到一個定時器。循環通過具有可調節環路24小時內

問題是，循環的持續時間 - 我們可以稱爲looptime的變量 - 應該可以調整。如果looptime更改爲10000，則循環應在10秒內完成，如果更改爲100000，則應在100秒內完成，依此類推。

我是JavaScript新手，已經用下面的代碼創建了一個正常的時鐘 - 但它只根據一天的實際時間循環 - 如何使用單獨的變量加速或減慢時鐘？

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<meta charset='UTF-8' /> 
</head> 
<style> 
#counter { 
    background: #333; 
    font-family: sans-serif; 
    text-align: center; 
    color: #eee; 
    text-shadow: 1px 1px 5px black; 
    padding: 1rem 0; 
    font-size: 3rem; 
} 
</style> 
<body> 
    <div id="counter"> 
    <p></p> 
    </div> 
<script type="text/javascript"> 
<!-- 
setInterval(function time(){ 
    var d = new Date(); 
    var hours = d.getHours(); 
    var min = d.getMinutes(); 
    if((min + '').length == 1){ 
    min = '0' + min; 
    } 
    var sec = 0 + d.getSeconds(); 
    if((sec + '').length == 1){ 
     sec = '0' + sec; 
    } 
    jQuery('#counter').html(hours+':'+min+':'+sec) 
}, 1000); 

// --> 
</script> 
</body> 
</html>

來源

2017-06-21 the_darkside

這聽起來很像https://stackoverflow.com/q/28 000415/215552，但很難說，因爲你沒有真正嘗試過任何東西。 –

試試這個只是做了一些修改@Jonas答案;）

var seconds=0; 
 
var increasepersecond=10;//a regular timer 
 

 
//Call according to speed 
 
function countAndDisplay(){ 
 
    var time=[]; 
 
    [60,60,24].reduce(function(left,max,i){ 
 
     time[i]= ('0' + (left%max)).slice(-2); 
 
     return (left-time[i])/max; 
 
    },seconds); 
 
    
 
    jQuery('#counter').html(time.reverse().join(":")) 
 
    seconds+=increasepersecond; 
 
} 
 

 
setInterval(countAndDisplay,1000/increasepersecond);// Run timer accoring to incresed speed

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<meta charset='UTF-8' /> 
 
</head> 
 
<style> 
 
#counter { 
 
    background: #333; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
    color: #eee; 
 
    text-shadow: 1px 1px 5px black; 
 
    padding: 1rem 0; 
 
    font-size: 3rem; 
 
} 
 
</style> 
 
<body> 
 
    <div id="counter"> 
 
    <p></p> 
 
    </div> 
 
<script type="text/javascript"> 
 
<!-- 
 

 
// --> 
 
</script> 
 
</body> 
 
</html>

來源

2017-06-21 17:22:31

感謝，@ govind，雖然有沒有辦法顯示像1，2的單個數字作爲'01'，'02'等？ –

if（days <10）{days =「0」+ days;} if（hours <10）{hours =「0」+ hours;} if（minutes <10）{minutes =「 0）+分鐘;} if（seconds <10）{seconds =「0」+ seconds;}' –

立即嘗試@the_darkside以更簡單的方式完成它;） –

你可以做這樣的事情：

var time = 10000; 

var counter = setInterval(function time(){ 
    var d = new Date(); 
    var hours = d.getHours(); 
    var min = d.getMinutes(); 
    if((min + '').length == 1){ 
    min = '0' + min; 
    } 
    var sec = 0 + d.getSeconds(); 
    if((sec + '').length == 1){ 
     sec = '0' + sec; 
    } 
    jQuery('#counter').html(hours+':'+min+':'+sec) 
}, time); 


clearInterval(counter); 

time = 100000; 
counter();

來源

2017-06-21 16:56:24

如果我正確理解你的問題，那麼我會在兩個部分做到這一點。我將要描述的第一部分是將時間遞增1秒（用於通過時間前進）並根據需要調整分鐘和小時的功能。我將說明下面的僞代碼：

function incrementSeconds(hours,minutes,seconds,secondsIncrement) { 
    seconds += secondsIncrement; 

    if (seconds > 59) { 
     seconds -= 60; 
     minutes += 1; 
    } 

    if (minutes == 60) { 
     minutes = 0; 
     hours += 1; 
    } 

    if (hours == 24) { 
     //at this point, the time will be 
     // 24:00:00 
    } 
}

上面的函數基本上增加secondsIncrement秒數爲當前時間，並且如果它是> 59，調整分鐘和小時相應。

然後，如果你想增加基於您的變量的時鐘，你可以使用以下命令：

var clockInterval = setIntervalfunction() { 
    incrementSeconds(hours,minutes,seconds,10); 
},looptime/8640);

最後一點設置一個Java的時間間隔。該函數將每x毫秒調用一次（其中x在setInverval的參數1中定義）。有86400秒的一天，所以第一個參數需要因素在，但我把它濃縮到8640，並且已經設置了一個增量秒參數3到10，所以10秒每次調用改變時鐘。這是爲了減少對該功能的調用次數。

我們呼籲的setInterval具有可變前clockInterval的原因是爲了給我們一個句柄定時器對象。這樣，當你想停止的時間間隔，您可以撥打

clearTimeout(clockInterval);

來源

2017-06-21 16:57:02

incrementSeconds（小時，分鐘，秒，11）;會打破你的代碼（這應該是可以調整的） –

你能解釋一下嗎？它應該能夠採取的任何秒價值高達60（我沒有考慮的情況下它比更大）。 –

對不起，錯誤的例子。但是，如果incrementSeconds是例如600，它不會正常工作 –

您需要手動計數：

var seconds=0; 
var increasypersecond=1;//a regular timer 

//or 

increasepersecond=60*60*24/10 ;//or do all in 10 seconds 

//or 

var looptime=10;//all in 10 seconds 
increasepersecond=60*60*24/looptime; 

//call this each second (or faster) 
function countAndDisplay(){ 
    var time=[]; 
    [60,60,24].reduce(function(left,max,i){//sets up the time array 
     time[i]=left%max; 
     return (left-time[i])/max; 
    },seconds); 
    console.log(time.reverse().join(":")); 
    seconds+=increasepersecond; 
} 

setInterval(countAndDisplay,1000);//regular

來源

2017-06-21 16:58:13

從'00：00：00'可以做到沒有當天秒？ –

@the_darkside很容易。 SImply秒= 0; –

@the_darkside http://jsbin.com/zexoguwima/edit?console –

循環通過具有可調節環路24小時內

回答

相關問題