當時間到達00h：59m：59s后，我的小時返回0

Question

我在這個小時的javascript計算中遇到問題，當時間達到1小時后，它會回到00:00:00然后再次計數。 即使我在我的html上硬編碼它，它只是繼續回到00小時。 請幫幫我！

這是代碼：

 $('.countup').each(function() { var targetdate = $(this).children("#targetdate").html(); //var seconds_left = new Date(targetdate).getTime(); var seconds_left = new Date(targetdate).getTime(); var timer = $(this).children('#timer'); var count = $(this); var hoursv = '', minsv = '', secsv = ''; var hours, minutes, seconds; seconds_left = seconds_left / 1000; var countdownrefesh = setInterval(function() { // Add one to seconds seconds_left = seconds_left + 1; // do some time calculations days = parseInt(seconds_left / 86400); seconds_left = seconds_left % 86400; hours = parseInt(seconds_left / 3600); seconds_left = seconds_left % 3600; minutes = parseInt(seconds_left / 60); seconds = parseInt(seconds_left % 60); if (hours < 10) { hoursv = "0" + hours; } else { hoursv = hours; } if (minutes < 10) { minsv = "0" + minutes; } else { minsv = minutes; } if (seconds < 10) { secsv = "0" + seconds; } else { secsv = seconds; } // format countdown string + set tag value s = hours + minutes + seconds; t = hoursv + " h :" + minsv + " h :" + secsv + " s"; timer.html(t) if (minutes > 10 && minutes <= 15 && hours >= 0) { count.attr('style', 'background-color: orange'); } else if (minutes > 15 && hours >= 0) { count.attr('style', 'background-color: red'); } else { count.attr('style', 'background-color: green'); } }, 1000); }); 

 <div class="countup"> <div id="targetdate" style="display: none">Thu Jan 01 1970 01:31:51 +0000</div> <span id="timer"></span> </div> <div class="countup"> <div id="targetdate" style="display: none">Thu Jan 01 1970 00:59:49 +0000</div> <span id="timer"></span> </div> <div class="countup"> <div id="targetdate" style="display: none">Thu Jan 01 1970 00:10:58 +0000</div> <span id="timer"></span> </div> <div class="countup"> <div id="targetdate" style="display: none">Thu Jan 01 1970 00:05:58 +0000</div> <span id="timer"></span> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

Answer 1

這是因為當你計算hours和minutes時，你將seconds_left除以86400和3600。 在計算期間，您需要使用不同的變量，而不是在用於保持setInterval函數的迭代之間的時間的變量。

 $('.countup').each(function() { var targetdate = $(this).children("#targetdate").html(); //var seconds_left = new Date(targetdate).getTime(); var seconds_left = new Date(targetdate).getTime(); var timer = $(this).children('#timer'); var count = $(this); var hoursv = '', minsv = '', secsv = ''; var hours, minutes, seconds; seconds_left = seconds_left / 1000; var countdownrefesh = setInterval(function() { // Add one to seconds seconds_left = seconds_left + 1; // do some time calculations days = parseInt(seconds_left / 86400); var cur_seconds = seconds_left % 86400; hours = parseInt(cur_seconds / 3600); cur_seconds = cur_seconds % 3600; minutes = parseInt(cur_seconds / 60); seconds = parseInt(cur_seconds % 60); if (hours < 10) { hoursv = "0" + hours; } else { hoursv = hours; } if (minutes < 10) { minsv = "0" + minutes; } else { minsv = minutes; } if (seconds < 10) { secsv = "0" + seconds; } else { secsv = seconds; } // format countdown string + set tag value s = hours + minutes + seconds; t = hoursv + " h :" + minsv + " h :" + secsv + " s"; timer.html(t) if (minutes > 10 && minutes <= 15 && hours >= 0) { count.attr('style', 'background-color: orange'); } else if (minutes > 15 && hours >= 0) { count.attr('style', 'background-color: red'); } else { count.attr('style', 'background-color: green'); } }, 1000); }); 

 <div class="countup"> <div id="targetdate" style="display: none">Thu Jan 01 1970 01:31:51 +0000</div> <span id="timer"></span> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

Answer 2

你的問題在這里：

seconds_left = seconds_left % 3600;

所以在第一次迭代之后，秒數永遠不會超過3600。

請注意，建議不要使用setInterval ，因為它會慢慢漂移。 您使用具有相同ID的多個元素，這是無效的，應該避免。 此外，這是非常低效的，因為它為每個計數元素設置單獨的計時器。

改為考慮（沒有jQuery）：

 window.onload = function() { var counters = document.querySelectorAll('.countup'); var targets = Array.from(document.querySelectorAll('.countup .targetdate')); var dates = targets.map(function(t){return new Date(t.textContent)}); var timers = Array.from(document.querySelectorAll('.countup .timer')); function formatTime(seconds) { function z(n){return (n<10?'0':'') + n} seconds = seconds % 86400; return z(seconds/3600|0) + ' h: ' + z((seconds%3600)/60|0) + ' m: ' + z((seconds%60)) + ' s'; } setInterval(function(){ var now = new Date(); timers.forEach(function(timer, i) { timer.textContent = formatTime((now - dates[i])/1000|0); }); }, 1000) }; 

 <div class="countup"> <div class="targetdate" style="display: none">Thu Jan 01 1970 01:31:51 +0000</div> <span class="timer"></span> </div> <div class="countup"> <div class="targetdate" style="display: none">Thu Jan 01 1970 00:59:49 +0000</div> <span class="timer"></span> </div> <div class="countup"> <div class="targetdate" style="display: none">Thu Jan 01 1970 00:10:58 +0000</div> <span class="timer"></span> </div> <div class="countup"> <div class="targetdate" style="display: none">Thu Jan 01 1970 00:05:58 +0000</div> <span class="timer"></span> </div>