Javascript Girl
  1. Javascript Girl
  3. La minuterie de compte à rebours JavaScript la plus simple possible?
Intereting Posts
Supprimer l'attribut désactivé surCliquez dans le champ de formulaire désactivé Le moyen le plus rapide de télécharger de gros fichiers Y a-t-il des dangers liés à l'utilisation des espaces de noms JavaScript? JQuery exemple (dans jsfiddle) fonctionnant dans Firefox mais pas dans IE8, 7 Un ou deux chiffres numériques Regex Angular 1.0.1 vs 1.3.0 pour les directives Comment remplacer & lt; Et & gt; De la réponse xml côté client Comment utiliser SignalR avec le cross-domain Utilisation de Longitude / Latitude comme Waypoint Pourquoi je me trompe, résulte-t-il de la fonction? Puis-je modifier la disposition de la page lors de l'utilisation de window.print ()? Afficher uniquement le premier élément de ng-repeat Recherche de texte dans l'objet imbriqué (collection Backbone.js comme exemple) JQuery Trigger Event dans AngularJS Karma Test Combinaison et compression de plusieurs fichiers JavaScript en php

La minuterie de compte à rebours JavaScript la plus simple possible?

Je voulais simplement demander comment créer le compte à rebours le plus simple possible.

Il y aura une phrase sur le site en disant:

"L'inscription se ferme en 05:00 minutes!"

Donc, ce que je veux faire, c'est créer un minuteur de compte à rebours simple qui passe de "05:00" à "00:00", puis réinitialise à "05:00" une fois qu'il se termine.

J'avais déjà des réponses, mais elles semblent trop intenses (objets Date, etc.) pour ce que je veux faire.

J'ai deux démos, un avec jQuery et un sans. Ni utiliser les fonctions de date et sont aussi simple que possible.

Demo with vanilla JavaScript 

 function startTimer(duration, display) { var timer = duration, minutes, seconds; setInterval(function () { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { timer = duration; } }, 1000); } window.onload = function () { var fiveMinutes = 60 * 5, display = document.querySelector('#time'); startTimer(fiveMinutes, display); }; 
 <body> <div>Registration closes in <span id="time">05:00</span> minutes!</div> </body>

Si vous voulez une minuterie réelle, vous devez utiliser l'objet date.

Calculez la différence.

Formatez votre chaîne. 

 window.onload=function(){ var start=Date.now(),r=document.getElementById('r'); (function f(){ var diff=Date.now()-start,ns=(((3e5-diff)/1e3)>>0),m=(ns/60)>>0,s=ns-m*60; r.textContent="Registration closes in "+m+':'+((''+s).length>1?'':'0')+s; if(diff>3e5){ start=Date.now() } setTimeout(f,1e3); })(); }

Exemple

Jsfiddle

Pas trop précis 

 var time=5*60,r=document.getElementById('r'),tmp=time; setInterval(function(){ var c=tmp--,m=(c/60)>>0,s=(cm*60)+''; r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s tmp!=0||(tmp=time); },1000);

JsFiddle

Vous pouvez facilement créer une fonctionnalité de minuterie en utilisant setInterval.Below est le code que vous pouvez l'utiliser pour créer la minuterie.

http://jsfiddle.net/ayyadurai/GXzhZ/1/ 

  <div> Registration closes in <span id="timer">05:00<span> minutes! </div> <script> window.onload = function(){ var hou = 2; var sec = 60; setInterval(function(){ document.getElementById("timer").innerHTML = hou +" : " + sec ; sec--; if(sec == 00) { hou--; sec = 60; if (hou == 0) { hou = 2; } } },500); } </script>