我有一個網路研討會,每天每小時每 15 分鐘運行一次(例如:11:00、11:15、11:30 和 11:45)。
我想要一個倒計時計時器,它顯示距離下一個開始時間的剩余分鐘數,我可以從幾天的搜索中找到,并試圖自己弄清楚這一點是每小時倒計時。
我的問題是,如何每 15 分鐘而不是每 60 分鐘更新一次此代碼。
<script>
/* Return minutes and seconds to next hour
** @returns {Object} minutes: minutes remaining
** seconds: seconds remaining
*/
function getTimeRemaining() {
var t = Date.now();
var seconds = (60 - Math.floor(t % 6e4 / 1e3)) % 60;
var minutes = 60 - Math.ceil(t % 3.6e6 / 6e4) (seconds? 0:1);
return {
'minutes': ('0' minutes).slice(-2),
'seconds': ('0' seconds).slice(-2) };
}
// Simple show remaining function
function showRemaining() {
var r = getTimeRemaining();
document.getElementById('clock').textContent = (r.minutes ':' ('0' r.seconds).slice(-2));
// Run again just after next full second
setTimeout(showRemaining, 1020 - (Date.now() % 1000));
}
showRemaining();
</script>
uj5u.com熱心網友回復:
該解決方案似乎過于復雜,您絕對應該將其setInterval用于必須每 x 秒更新一次內容的任務,遞回呼叫setTimeout是一個壞主意。這是一個更容易理解的解決方案:
const runEvery = 15 * 60; // 15 minutes in seconds
const showRemaining = () => {
// get current time in seconds and find when the next run starts in seconds
const seconds = Math.round(Date.now() / 1000);
const nextRun = runEvery * Math.ceil(seconds / runEvery);
const timeLeft = nextRun - seconds;
const minutesLeft = Math.floor(timeLeft / 60);
const secondsLeft = timeLeft % 60;
document.getElementById('clock').textContent = minutesLeft ':' ('0' secondsLeft).slice(-2);
}
showRemaining();
setInterval(showRemaining, 1000);
<div id="clock"></div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/496592.html
標籤:javascript 倒数 倒计时器
上一篇:如何使用cypress/javascript從select中呼叫所有選項值?
下一篇:Chartjs3圓環圖圓角
