Compte à rebours pour x à 0 en Javascript?

Question

J'ai depuis le backend une heure au format 00:12:54 et je l'affiche à l'écran. Mais, j'aimerais avoir ce temps pour continuer à descendre. Je dois cependant créer une variable en javascript qui sera ancienne et avec setTimeout pour boucler pour afficher avec document.getElementById la nouvelle valeur. Je pense que cela peut être problématique si j'ai beaucoup de temps pour descendre en même temps. Je pourrais avoir besoin d'un tableau?

Comment le feriez-vous? Si je n'ai pas d'autre suggestion, je vais essayer de le faire, mais je suis curieux de savoir s'il y a un moyen plus sûr de le faire.

Answer 1

algorithme général:

1. Lire le temps du serveur.
2. Lire l'heure actuelle.
3. Appel d'une fonction.
4. Dans votre fonction, lisez l'heure actuelle, obtenez le delta de l'heure initiale que vous avez lu à l'étape 2.
5. Soustrayez le delta de l'heure initiale que vous avez lue du serveur à l'étape 1 et affichez le reste.
6. La fonction doit appeler window.setTimeout pour s'appeler en 1000ms (ou ajuster en fonction du temps écoulé dans la fonction), si vous voulez continuer le décompte.

Voici une coupe approximative:

window.onload = function() { 
    var countdown_start_in_ms = 6000; // from server 

    function tick() { 
     var now = new Date().getTime(); 
     var disp = start - now; 

     if (disp < 0) { 
      disp = 0; 
     } 

     var el = document.getElementById("countdown"); 

     el.innerHTML = 
      // quick hack to format time 
      /(\d\d:\d\d:\d\d) ...$/.exec(new Date(disp).toUTCString())[1]; 

     if (disp > 1000) { 
      var elapsed = new Date().getTime() - now; 
      window.setTimeout(tick, 1000 - elapsed); 
     } else { 
      // stop countdown and set color to light grey 
      el.style.color = "#ccc"; 
     } 
    } 

    var start = new Date().getTime() + countdown_start_in_ms; 
    tick(); 
} 

Answer 2

Connaissez-vous jQuery Framework? C'est un framework Javascript qui a beaucoup de méthodes et de fonctions utilitaires qui vous permettent de faire des choses Javascript plus facilement. Il s'agit d'un count down plugin (ne l'avez pas testé).

Je vous suggère de download JQuery par rapport à download the plugin. Vérifiez l'exemple de code dans l'onglet "relatif" du site Web. Vous pouvez avoir quelque chose comme:

$('#until2d4h').countdown({until: '+12M +54S'}); 

* Le seul inconvénient avec ce que je vous suggère est que vous aurez besoin de 2 .js à ajouter. Essayez de les ajouter seulement lorsque vous en avez besoin et vous serez trouvé.

Answer 3

Vous pas le goût de celui-ci, mais il va vous faire du bien:

Google pour « javascript timer » et mettre la main sale lecture à travers les divers exemples et des tutoriels renvoyés par cette recherche.

Vous apprendrez beaucoup plus que comment écrire un compte à rebours. :-)

Bonne chance!

Answer 4

Jetez un oeil à Grab hands and set your own time. et inspectez son code. Alors qu'il est écrit avec Dojo, la partie "clock" est en JavaScript. Dans votre cas, la seule différence est de savoir comment faire progresser le compteur — plutôt que de l'augmenter.