Javasacript Timer conto alla rovescia in giorni, ore, minuti, secondi

Question

Sto provando a creare un conto alla rovescia basato sul tempo. Non è basato su date attuali. Il tempo iniziale che verrà estratto sarà da un file php separato. Questo sarà per un gioco basato su browser. Quando qualcuno fa clic sul pulsante per avviare questo script. controllerà se sono soddisfatti determinati requisiti e in tal caso verrà avviato questo script. In base al livello dell'oggetto, trascinerà il timer iniziale per quel livello procedurale. Spero che abbia un senso. Comunque, ho basato lo script del timer sul primo codice che ho fornito.

Questo script rappresenta solo i minuti e i secondi. L'ho modificato per includere anche giorni e ore. Da qualche parte nel processo ho incasinato e lo script non funziona affatto. Non sono nemmeno sicuro se questo sarebbe il metodo migliore per calcolarlo. Quindi, se hai un metodo più pulito per farlo, per favore condividi. Grazie in anticipo.

Questo script si basa su uno script di minuti/secondi che ho visto. Ecco la fonte originale:

<span id="countdown" class="timer"></span> 
<script> 
    var seconds = 60; 
    function secondPassed() { 
    var minutes = Math.round((seconds - 30)/60); 
    var remainingSeconds = seconds % 60; 
    if (remainingSeconds < 10) { 
     remainingSeconds = "0" + remainingSeconds; 
    } 
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
    if (seconds == 0) { 
    clearInterval(countdownTimer); 
    document.getElementById('countdown').innerHTML = "Buzz Buzz"; 
    } else { 
    seconds--; 
    } 
    } 
    var countdownTimer = setInterval('secondPassed()', 1000); 
</script> 

Ecco lo script modificato che sto cercando di includere giorni, ore, minuti e secondi.

<span id="countdown"></span> 
<script> 
    var current_level = 93578; 

    function timer() { 

     var days = Math.round(current_level/86400); 
     var remainingDays = Math.round(current_level - (days * 86400)); 

     if (days <= 0){ 
      days = current_level; 
     } 

     var hours = Math.round(remainingDays/3600); 
     var remainingHours = Math.round(remainingDays - (hours * 3600)); 

     if (hours >= 24){ 
      hours = 23; 
     } 

     var minutes = Math.round(remainingHours/60); 
     var remainingMinutes = Math.round(remainingHours - (minutes * 60)); 

     if (minutes >= 60) { 
      minutes = 59; 
     } 

     var seconds = Math.round(remainingMinutes/60); 

     document.getElementById('countdown').innerHTML = days + ":" + hours ":" + minutes + ":" + seconds; 

     if (seconds == 0) { 
      clearInterval(countdownTimer); 
      document.getElementById('countdown').innerHTML = "Completed"; 
     } 
    } 
    var countdownTimer = setInterval('timer()', 1000); 
</script> 

Answer 1

ho finalmente tornato a guardare questo e ri-scritto il codice e questo funziona come un fascino.

<span id="countdown" class="timer"></span> 
<script> 
var upgradeTime = 172801; 
var seconds = upgradeTime; 
function timer() { 
    var days  = Math.floor(seconds/24/60/60); 
    var hoursLeft = Math.floor((seconds) - (days*86400)); 
    var hours  = Math.floor(hoursLeft/3600); 
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600)); 
    var minutes  = Math.floor(minutesLeft/60); 
    var remainingSeconds = seconds % 60; 
    if (remainingSeconds < 10) { 
     remainingSeconds = "0" + remainingSeconds; 
    } 
    document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds; 
    if (seconds == 0) { 
     clearInterval(countdownTimer); 
     document.getElementById('countdown').innerHTML = "Completed"; 
    } else { 
     seconds--; 
    } 
} 
var countdownTimer = setInterval('timer()', 1000); 
</script> 

Answer 2

È possibile utilizzare questo js per gestire il timer in modo efficiente.

http://countdownjs.org/

Answer 3

Personalmente vorrei utilizzare l'integrazione del timer jquery conto alla rovescia. È semplice e ha un numero di opzioni da visualizzare in diversi formati. Dal momento che sono abbastanza nuovo anche per JS, questo è stato il modo più semplice per trovare un conteggio/timer.

http://keith-wood.name/countdown.html

Answer 4

<span id="date_regist"></span> 
<script type="text/javascript"> 
    <script src="http://rc.sefunsoed.org/assets/js/countdown/jquery.countdown.min.js"></script> 
    var s = '2017/03/01 15:21:21'; 
     f = '2017/03/01 15:22:00'; 
format = '%-w <sup>week%!w</sup> ' + '%-d <sup>day%!d</sup> ' + '%H <sup>hr</sup> ' + '%M <sup>min</sup> ' + '%S <sup>sec</sup>'; 



    jQuery('#date_regist').countdown(s) 
     .on('update.countdown', function(event) { 

    jQuery(this).html("<b>will be open </b>" + event.strftime(format)); 
    }) 
    .on('finish.countdown', function(event) { 
    jQuery("#date_regist").remove() 
    jQuery("body").append('<span id="date_regist"></span>') 
    jQuery("#date_regist").countdown(f) 
     .on('update.countdown', function(event) { 

     jQuery(this).html("<b> is open for </b>" + event.strftime(format)); 
     }) 
     .on('finish.countdown', function(event) { 
     jQuery('#rework').hide(); 
     //jQuery(this).html("<b> is closed.</b>"); 
     }); 
    }); 
</script> 

Answer 5

Ecco il mio elaborato e testati esempio, in base al codice di

<span id="countdown"></span> 
<script> 
    var current_level = 3002; 

    function timer() { 

     var days = Math.floor(current_level/86400); 
     var remainingDays = current_level - (days * 86400); 

     //if (days <= 0){ 
     // days = current_level; 
     //} 

     var hours = Math.floor(remainingDays/3600); 
     var remainingHours = remainingDays - (hours * 3600); 

     //if (hours >= 24){ 
     //  hours = 23; 
     //} 

     var minutes = Math.floor(remainingHours/60); 
     var remainingMinutes = remainingHours - (minutes * 60); 

     //if (minutes >= 60) { 
     //  minutes = 59; 
     //} 

     var seconds = remainingMinutes; 

     document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds; 

     //if (seconds == 0) { 
     // clearInterval(countdownTimer); 
     //  document.getElementById('countdown').innerHTML = "Completed"; 
     //} 

     current_level--; 
    } 
    var countdownTimer = setInterval(timer, 1000); 
</script>