Jump to content
×
×
  • Create New...

Un Décompte


v4vx
 Share

Recommended Posts

Niveau requis Débutant

Temps estimé : 30 minutes

 

Salut à tous,

 

Etant donné qu'il n'y a pas de sous forum pour le js, je fais mon tutoriel à la racine... Ce tutoriel est très simple et court, mais il vous permettra à la fin de pouvoir faire un décompte. Bon déjà il faut savoir que le but du tutoriel est de faire un décompte qui commence à xsec, pour terminer à 0. Mais si on dépasse les 60sec, il faut afficher les minutes, etc...

 

I - Le décompte

 

Révélation

 

Étant donné que le script final est fait pour être le plus flexible possible, il faut passer par des fonctions. Cette fonction doit prendre en compte 2 paramètres : le temps, et l'endroit où l'on doit l'afficher. Donc on obtient ça :

function decompte(temps, elem)
{
}
Maintenant passons à l'affichage. La meilleur façon selon moi est de passer par innerHTML. Elem sera donc l'id de l'élément (la balise) html. Le code pour afficher quelque chose dans une balise html est celui-ci :
document.getElementById(elem).innerHTML=temps;
On prend l'élément d'id elem, et on lui met comme texte dans ses balises temps. Passons au coeur de la fonction : le décompte ! Pour celà, il faut utiliser un fonction de callback window.setTimeout. Cette fonction permet d'appeler un fonction au bout de x milisecondes, avec y arguments. Elle s'utilise comme ceci :
window.setTimeout(fonction, délais, [arg1, [arg2, [...]]])
Comme nous on veut un décompte, il faut que le temps diminue de 1sec toute les secondes, dans la même fonction. Mais l'élément html doit toujour être le même. Ce qui nous donne au final :
//la fonction doit être donné directement, sans "", ni ()
//1000 pour le délais, car c'est en millisecondes
window.setTimeout(decompte, 1000, temps - 1, elem);
Et c'est tout pour faire un décompte allant de x secondes à 0 ! Voici la fonction complètes, pour ceux n'arrivant pas :
function decompte(temps, elem)
{
   document.getElementById(elem).innerHTML=temps;
   window.setTimeout(decompte, 1000, temps - 1, elem);
}
Pour l'utilisation, c'est très simple :
Il vous reste : sec

   decompte(10, "timer");

 

 

 

 

II - l'affichage du temps

 

Révélation

 

Comme toujours, une fonction, mais avec pour argument les secondes :

fonction timeToStr(secondes)
{
}
Il faut maintenant créer les variables pour le temps (je vais juste faire secondes, minutes, heure... le reste, si vous voulez plus, cherchez un peu...
//comme il y a que 3 variables, et pas de confusion
//une seule lettre suffis !
var s, m, h;
Bon ça c'est trop simple... Passons au plus dure : changer les secondes en heure / min / sec ! Pour cela, il faut bien sur des divisions : sec / 60 = min. sec / 3600 = heures. Mais cela ne fait pas tout, si par exemple on a 3752sec ? Si on n'utilise que les divisions, ça va donner : 1H, 62min et 3752sec. Alors que ça doit donner : 1H, 2min et 32sec.

 

Pour cela, il faut que toutes les 60sec, on passe à une minute, et qu'on les enlèves au secondes, toute les 60min, on passe aux heures, et que l'on enlèves les minutes... Pour faire ça, rien de tel que le modulo ! En js, et pour la plupart des langages, le modulo est le signe %. Sont utilisation ce fait comme ci :

var x = 256 % 60;
//x vaut 16 (256 - 4*60)
Une fois ce problème réglé, il y a un autre problème : comment faire pour ne pas que il s'affiche par exemple : 1H 0min et 13sec. Il faut utiliser les conditions, et ce dès l'affectation des variables ! Pour faire plus rapide, il faut utiliser la condition ternaire :
variable = [condition] ? [valeur de variable si le condition vrai] : [sinon];
Je vous fait juste pour les minutes la bonne ligne :
//j'utilise Math.floor, pour éviter les 2,55255min...
//Math.floor tronque le chiffre, par exemple :
// 1.2 => 1
// 5.9 => 5
m = secondes >= 60 ? Math.floor(secondes / 60)%60 : 0;
//m, si il y a plus de 60 secondes = nb de min,
//sinon = 0
Maintenant, il nous faut une valeur de retour, en string. Il faut donc créer une variable output par exemple.
var output = "";
Comme il faut afficher les variables uniquement que quand elle sont différente de zéro, encore une condition :
//je fais toujour que pour les minutes !
//à vous de faire le reste, pour vous entrainer.
if(m != 0)
   //pas besoin de {} ici, car il y a qu'une opération
   //notez le += qui permet d'ajouter à la fin de output la valeur donnée
   //ne pas oublier l'espace après min, pour éviter que les secondes soit collées.
   output += m + "min ";

//Les autres conditions, dans l'ordre d'affichage (h puis minutes, puis sec...)

//retourne le string output contenant les minutes, secondes, heures...
return output;
Voilà pour ceux qui attendent que le code final (je suis trop gentil :hehe!: )
function timeToStr(secondes)
{
   var s,m,h;

   //pas besoin de la condtion ternaire ici 
   s = secondes%60;
   m = secondes >= 60 ? Math.floor(secondes/60%60) : 0;
   h = secondes >= 3600 ? Math.floor(secondes/3600%24) : 0;

   var output = "";

   if(h != 0)
       output += h + "h ";
   if(m != 0)
       output += m + "min ";
   if(s != 0)
      output += s + "sec";

   return output;
}
Il manque plus qu'à mettre à jour la fonction décompte :
function decompte(temps, elem)
{
   document.getElementById(elem).innerHTML=timeToStr(temps);
   window.setTimeout(decompte, 1000, temps - 1, elem);
}
Voilà !

 

 

Cordialement,

Hey hey

Link to comment
Share on other sites

  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Developer

function timeToStr(secondes)
{
   var s,m,h,;

   //pas besoin de la condtion ternaire ici 
   s = secondes%60;
   m = secondes >= 60 ? Math.floor(secondes/60%60) : 0;
   h = secondes >= 3600 ? Math.floor(secondes/3600%24) : 0;

   var output = "";

   if(h != 0)
       output += h + "h ";
   if(m != 0)
       output += m + "min ";
   if(s != 0)
      output += s + "sec";

   return output;
}

 

Petite erreur insignifiante, tu as mis une virgule en trop à la troisième ligne (var s,m,h; )

 

Sinon merci du tutoriel ;)

Link to comment
Share on other sites

function timeToStr(secondes)
{
   var s,m,h,;

   //pas besoin de la condtion ternaire ici 
   s = secondes%60;
   m = secondes >= 60 ? Math.floor(secondes/60%60) : 0;
   h = secondes >= 3600 ? Math.floor(secondes/3600%24) : 0;

   var output = "";

   if(h != 0)
       output += h + "h ";
   if(m != 0)
       output += m + "min ";
   if(s != 0)
      output += s + "sec";

   return output;
}

 

Petite erreur insignifiante, tu as mis une virgule en trop à la troisième ligne (var s,m,h; )

 

Sinon merci du tutoriel ;)

 

Merci :D

J'ai juste fait vite fait ce tuto, et à la fin ça ma saoulé, alors j'ai c/c un de mes codes, mais que avait semaines et jours en plus, elle vient de là la virgule :wink:

Link to comment
Share on other sites

  • 11 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share



Important Information

Terms of Use / Privacy Policy / Guidelines / We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.