2014-11-28 20 views
7

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.Javasacript Timer conto alla rovescia in giorni, ore, minuti, secondi

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> 

risposta

13

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> 
+2

Con javascript è molto meglio pubblicare demo di lavoro. –

2

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

http://countdownjs.org/

+0

alcuna idea di come usarlo? (+1 per fornire una buona risorsa però) – HungryDB

+0

La documentazione è lì. Vai oltre. – Dhruv

+0

Non è in cerca di timer per conto alla rovescia per data corrente/data futura. I timer si baseranno su ciò che legge da un file. Ogni volta che qualcuno fa clic sul pulsante "upgrade", controlla che il giocatore disponga delle risorse corrette, le prenda, quindi controlli i livelli correnti degli edifici e tiri il timer necessario per il livello successivo. Una volta eseguito il conto alla rovescia a 0, verrà ripristinato il pulsante di aggiornamento in modo che il giocatore possa eseguire di nuovo l'aggiornamento. Questo documento sembra fare ciò che fanno tutti gli altri e si basa sull'inserimento di una data futura. –

1

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

+1

Sì ... buon alternartive – Dhruv

+0

Ancora una volta questo snippet è per il pull date non una variabile impostata come visualizzato nel codice sorgente originale in secondi e nella versione modificata come current_level –

0
<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> 
+0

I dump di codice, sebbene possano risolvere il problema, non sono del tutto utili. Per favore, puoi spiegare il tuo codice e perché questo aiuta l'OP. Spiegando il codice aiuti sia l'OP che i futuri visitatori. – Bugs

0

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> 
+0

È necessario inviare una risposta a una domanda di tre anni che ha già una risposta accettata? –

Problemi correlati