設置24小時剩餘倒計時

好的，你可以從這篇文章的標題中得知。我正在嘗試如何創建一個24小時剩餘的倒數時鐘。我無法理解如何解決這個問題。設置24小時剩餘倒計時

我知道了，5分鐘工作，但我只需要在如何把它變成小時，而不是

HTML的在正確的方向輕推：

<body> 
    <input type="text" value="5"> 
    <div>Time Remaining <span id="remainingTime">05:00</span> minutes!</div> 
</body>

JavaScript/jQuery：

function Timer(duration, display) 
{ 
    var timer = duration, minutes, seconds; 
    setInterval(function() { 
     minutes = parseInt(timer/60, 10) 
     seconds = parseInt(timer % 60, 10); 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.text(minutes + ":" + seconds); 

     if (--timer < 0) { 
      timer = duration; 
     } 
    }, 1000); 
} 

jQuery(function ($) 
{ 
    var fiveMinutes = 60 * jQuery('#checkTime').val(); 
    var display = $('#remainingTime'); 
    Timer(fiveMinutes, display); 
});

請插件。

來源

2016-01-12 Chris Beckett

這已經說過一千次，我知道，但爲什麼不能用一個簡單的jQuery插件呢？特別是因爲你已經加載jQuery的依賴。或者這是一個學習如何構建計時器的寵物項目？ –

@JonKoops - 這是一個寵物項目，我不想使用jQuery插件 –

@JonKoops我可能對此很蠢，答案是60 * 60 *任何數字在輸入字段中？ –

我改變了你撥弄了一下功能，

function Timer(duration, display) 
{ 
    var timer = duration, hours, minutes, seconds; 
    setInterval(function() { 
     hours = parseInt((timer /3600)%24, 10) 
     minutes = parseInt((timer/60)%60, 10) 
     seconds = parseInt(timer % 60, 10); 

     hours = hours < 10 ? "0" + hours : hours; 
     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.text(hours +":"+minutes + ":" + seconds); 

       --timer; 
    }, 1000); 
} 

jQuery(function ($) 
{ 
    var twentyFourHours = 24 * 60 * 60; 
    var display = $('#remainingTime'); 
    Timer(twentyFourHours, display); 
});

看看這裏：http://jsfiddle.net/j1zn0x9c/

編輯：記住我所做的更正。這根本不是線性的。也請檢查this answer。

來源

2016-01-12 15:33:05 Joum

@ChrisBeckett ...修復它，對於stoopid錯誤抱歉。：D – Joum

你可以使用這個小型的JavaScript項目：http://neswork.com/javascript/alarm-clock/直接或複製你想要

來源

2016-01-12 15:27:57 Gavriel

只要在setTimeout內部進行操作，最終會打開計時器。

更好地做到像圖所示

function timerUpdate() {   
    var currentTime = new Date(); 
    var h = currentTime.getHours(); 
    var m = currentTime.getMinutes(); 
    var s = currentTime.getSeconds(); 

    setTimeout(timerUpdate,1000); 

    //Update the hour, minute and second in UI 
}

我的意思是，頻繁同步您的倒計時。也可以使用2個定時器或更大的延遲改善1秒定時器

來源

2016-01-12 15:33:06 Oxi

你應該做你的功課。所以，我會給你一個想法如何修改這個。

您的fiveMinutes變量提供以秒爲單位的時間。如果#checkTime的值爲5，那麼fiveMinutes等於300.如果您需要24小時，則此變量應爲60 x 60 x 24。

現在當這個秒數在函數內傳遞時，它將數字分解爲分鐘和秒。

minutes = parseInt(timer/60, 10); //n secs div 60 = minutes 
seconds = parseInt(timer % 60, 10);

您需要在此添加幾個小時。

hours = parseInt(timer/60 * 60)  // (n secs div 60 = mins) div 60 = hours

修改您display字符串顯示小時了。

請現在就做好功課。

來源

2016-01-12 15:38:37

並不意味着成爲一個阻力，但僞善的「做你的功課」位是有點不必要的。特別是當你甚至沒有在他的問題上發表什麼光。 – Joum

我比你流光更多。我的燈甚至涵蓋了他自願理解代碼的方面，而不是從外面尋求完整的解決方案。 –

K dude ...有一個很好的！ – Joum

你可以使用moment.js嗎？在代碼中處理時間可以爲您節省很多複雜的工作。jsFiddle

代碼：

function Timer(duration, display) 
{ 
    var myInterval = setInterval(function() { 
     var subtract = duration.subtract(1, 'seconds'); 
     var formatted = moment(subtract).format('HH:mm:ss'); 
     if(formatted === '00:00:00'){ 
      clearInterval(myInterval); 
     } 
     display.text(formatted); 

    }, 1000); 
} 

jQuery(function ($) 
{ 
    var fiveMinutes = moment().hours(23).minutes(59).seconds(59); 
    var display = $('#remainingTime'); 
    Timer(fiveMinutes, display); 
});

來源

2016-01-12 15:50:35

剛剛看到你的無插件請另外...所以沒關係。 –

設置24小時剩餘倒計時

回答

相關問題