web-dev-qa-db-fra.com

Javascript compte à rebours en jours, heures, minutes, secondes

J'essaie de créer un compte à rebours basé sur le temps. Ce n'est pas basé sur current_dates. Le temps initial qui sera tiré sera à partir d'un fichier php séparé. Ce sera pour un jeu basé sur un navigateur. Quand quelqu'un clique sur le bouton pour lancer ce script. il vérifiera si certaines conditions sont remplies et si tel est le cas, ce script sera lancé. En fonction du niveau de l'objet, le minuteur initial sera tiré pour ce niveau précédent. J'espère que cela a du sens. Quoi qu'il en soit, j'ai basé le script de minuterie sur le premier code que je fournis. 

Ce script ne prend en compte que les minutes et les secondes. Je l'ai modifié pour inclure les jours et les heures. Quelque part dans le processus, je me suis trompé et le script ne fonctionne même pas du tout. Je ne suis pas sûr non plus que ce soit la meilleure méthode pour calculer cela. Donc, si vous avez une méthode plus propre à faire cela s'il vous plaît partager. Merci d'avance.

Ce script est basé sur un script de minutes/secondes que j'ai vu. Voici la source 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>

Voici le script modifié que j'essaie d'inclure des jours, des heures, des minutes et des secondes.

<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>
javascriptphptimercountdowntimer
9
Phoenix Ryan

Je suis finalement revenu à regarder cela et j'ai réécrit le code et cela fonctionne comme un charme.

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;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
  }
  document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "Completed";
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval('timer()', 1000);
<span id="countdown" class="timer"></span>

20
Phoenix Ryan

Vous pouvez utiliser ce js pour gérer efficacement la minuterie.

http://countdownjs.org/

3
Dhruv Kapatel

Personnellement, j'utiliserais l'intégration du compte à rebours jquery. C'est simple et il y a plusieurs options à afficher dans différents formats. Etant donné que je suis assez nouveau sur JS également, c’est le moyen le plus simple que j’ai trouvé d’obtenir un compte/minuteur.

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

1
Armand Karambasis

Voici mon exemple élaboré et testé, basé sur votre code

<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
Simon Z
<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
vivek manavadariya