使用 setInterval 每秒調用一次 Javascript function

Question

我嘗試讓 function 讓我的 JavaScript 倒計時每秒運行一次，但不知何故我沒有讓 setInterval function 工作。

到目前為止，JS 代碼是這樣的：

// Set end date and time
var enddate = new Date();
endTimeDate = "2022-01-12 21:52";

// Get date and time of today
var today = new Date();

// Calculate date and time difference
function getTimeDifference(endtime) {
    var total = Date.parse(endtime) - Date.parse(today);
    var seconds = Math.floor((total/1000) % 60);
    var minutes = Math.floor((total/1000/60) % 60);
    var hours = Math.floor((total/1000/60/60) % 24);
    var days = Math.floor(total/1000/60/60/24);

    
    return {
        total,
        days,
        hours,
        minutes,
        seconds
    };
}


function runCountdown() { 
var t = getTimeDifference(endTimeDate);

document.getElementById('days').innerHTML = t.days + " D";
document.getElementById('hours').innerHTML = t.hours + " H";
document.getElementById('minutes').innerHTML = t.minutes + " M";
document.getElementById('seconds').innerHTML = t.seconds + " S";
}

window.setInterval(runCountdown, 1000);

Answer 1

您的代碼未按預期工作的原因是您今天在 function 之外聲明，這意味着它只被調用一次，因此差異結果將始終相同。 您可能想要移動賦值和var today = new Date();的聲明在getTimeDifference function 內部，因此enddate值和today值之間會有實際差異。

 // Set end date and time var enddate = new Date(); endTimeDate = "2022-01-12 21:52"; // Get date and time of today // Calculate date and time difference function getTimeDifference(endtime) { var today = new Date(); console.log(endtime); var total = Date.parse(endtime) - Date.parse(today); var seconds = Math.floor((total/1000) % 60); var minutes = Math.floor((total/1000/60) % 60); var hours = Math.floor((total/1000/60/60) % 24); var days = Math.floor(total/1000/60/60/24); return { total, days, hours, minutes, seconds }; } function runCountdown() { var t = getTimeDifference(endTimeDate); document.getElementById('days').innerHTML = t.days + " D"; document.getElementById('hours').innerHTML = t.hours + " H"; document.getElementById('minutes').innerHTML = t.minutes + " M"; document.getElementById('seconds').innerHTML = t.seconds + " S"; } window.setInterval(runCountdown, 1000);

 <div id="days"> </div> <div id="hours"> </div> <div id="minutes"> </div> <div id="seconds"> </div>

Answer 2

您只能獲得一次當前時間，並且它永遠不會改變。 將您的today變量移動到getTimeDifference中，您應該會看到操作。 間隔每秒觸發一次，但由於today永遠不會改變，所以值總是相同的，看起來什么都沒有發生，但它確實發生了。 運行這個代碼片段來查看。

 // Set end date and time var enddate = new Date(); endTimeDate = "2022-01-12 21:52"; // Calculate date and time difference function getTimeDifference(endtime) { // Get date and time of today var today = new Date(); // <---- moved inside of getTimeDifference var total = Date.parse(endtime) - Date.parse(today); var seconds = Math.floor((total/1000) % 60); var minutes = Math.floor((total/1000/60) % 60); var hours = Math.floor((total/1000/60/60) % 24); var days = Math.floor(total/1000/60/60/24); return { total, days, hours, minutes, seconds }; } function runCountdown() { var t = getTimeDifference(endTimeDate); document.getElementById('days').innerHTML = t.days + " D"; document.getElementById('hours').innerHTML = t.hours + " H"; document.getElementById('minutes').innerHTML = t.minutes + " M"; document.getElementById('seconds').innerHTML = t.seconds + " S"; } window.setInterval(runCountdown, 1000);

 <html> <body> <div id="days"></div> <div id="hours"></div> <div id="minutes"></div> <div id="seconds"></div> </body> </html>

使用 setInterval 每秒調用一次 Javascript function

問題描述

1 個解決方案

解決方案1
1 2022-01-09 13:22:54

解決方案2
0 2022-01-09 13:27:20

使用 setInterval 每秒調用一次 Javascript function

問題描述

1 個解決方案

解決方案1 1 2022-01-09 13:22:54

解決方案2 0 2022-01-09 13:27:20

解決方案1
1 2022-01-09 13:22:54

解決方案2
0 2022-01-09 13:27:20