時間が00hの後に来ると時間が0に戻ります59m：59s

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

あなたの問題はここにある：

seconds_left = seconds_left % 3600; 

だから、最初の反復の後、秒のsetIntervalをこのように使用していることを3600

ノートの上に行くことはありませんそれはゆっくりと漂うので、アドバイスされていません。同じ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>

Answer 2

あなたはhoursとminutesを計算しているときに、86400と3600でseconds_leftを分けるためです。 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>