Revenir en haut Aller en bas
Forum Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.


Partagez|

Compte à rebours en JavaScript

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 6163
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9269
Admin

Ptite_Perle
18 - 16
MessageSujet: Compte à rebours en JavaScript Ven 25 Sep 2015 - 21:53
Compte à rebours en JavaScript

 
           Compte à rebours en JavaScript

Base


Nous allons commencer par créer dans un fichier .html une div avec un id compte_a_rebours, suivi de notre code JavaScript. On crée ensuite une variable pour sélectionner cette div.



var compte_a_rebours = document.getElementById("compte_a_rebours");




Attention à bien mettre le code JavaScript après la div. En effet, vu que le JavaScript s'exécute en même temps que le chargement de la page, l'id compte_a_rebours n'existera encore pas.

Calculs du nombre de jours, heures, minutes et secondes


On crée une variable pour la date actuelle.


var date_actuelle = new Date();



Puis celle pour l'évènement.
Syntaxe : Mois Jour Heures:Minutes:Secondes Année. Attention à bien mettre le nom du mois en anglais, et ne garder que les 3 premières lettres.


var date_evenement = new Date("Jan 1 00:00:00 2017");


Ici on choisit le 1 janvier 2017.

Voici comment nous allons procéder :


   On calcule la différence entre les deux dates (date_evenement - date_actuelle).
   Si la différence est strictement positive, le compte à rebours n'est pas terminé.
   Si la différence est nulle, alors le compte à rebours vient de se terminer à l'instant.
   Sinon (la différence est strictement négative), le compte à rebours est terminé. Dans ce cas-là, on calculera depuis combien de temps il est terminé.



Les variables des deux dates sont en millisecondes. On fait donc une soustraction des deux dates, puis on les divise par 1000 afin d'avoir une différence en secondes.

var total_secondes = (date_evenement - date_actuelle) / 1000;



Pour différencier si le compte à rebours est terminé ou non, on va ajouter un préfixe, qui, en fonction de la différence, vaudra "Compte à rebours terminé dans " ou "Compte à rebours terminé il y a ".
Dans le cas où la différence est négative, on modifiera la valeur de total_secondes pour lui mettre sa valeur absolue, afin que l'on puisse faire nos calculs plus tard correctement.

var prefixe = "Compte à rebours terminé dans ";
if (total_secondes < 0)
{
prefixe = "Compte à rebours terminé il y a "; // On modifie le préfixe si la différence est négatif

total_secondes = Math.abs(total_secondes); // On ne garde que la valeur absolue

}

if (total_secondes > 0)
{
// A faire, tous nos calculs

}
else // Si total_secondes == 0 (puisque l'on a prit sa valeur absolue)

{
compte_a_rebours.innerHTML = 'Compte à rebours terminé.';
}



Nous allons maintenant calculer le nombre de jours, d'heures, de minutes et de secondes restants.

Le nombre étant en secondes, 1 jour = 60 x 60 x 24 secondes.
La différence divisée par ce nombre nous donne le nombre de jours restants.
On récupère alors le plus grand entier inférieur ou égal à la valeur retournée (on tronque à l'unité), afin de ne pas avoir 10.345 jours restants, mais 10. On utilise pour cela la fonction Math.floor().


var jours = Math.floor(total_secondes / (60 * 60 * 24));



Passons aux heures restantes.
Sur les 10.345 jours restants (par exemple), on n'a gardé seulement 10. Il reste donc 0.345 jour, que nous allons devoir convertir en heures.
On soustrait donc aux secondes totales le nombre de jours (en secondes). Ça permet de récupérer les 0.345 jour (mais en secondes).
Vu que 1 heure = 60 x 60 secondes, la différence divisée par ce nombre nous permet d'obtenir le nombre d'heures restantes.
Pareil que pour les jours, on récupère le plus grand entier inférieur ou égal à la valeur retournée.


var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60));



Mêmes techniques pour les minutes et les secondes :

minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60);
secondes = Math.floor(total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60 + minutes * 60)));



Affichage


Il nous reste plus qu'à afficher le résultat.

compte_a_rebours.innerHTML = prefixe + jours + ' jours ' + heures + ' heures ' + minutes + ' minutes et ' + secondes + ' secondes.';



Améliorations


Maintenant, nous allons améliorer tout ça pour avoir un meilleur résultat.

   Si c'est 0 jour (ou 0 heure, ou 0 minute, ou 0 seconde), alors on ne les affiche pas. Exemple, s'il reste 0 jours, 3 heures, 0 minutes et 0 secondes, on n'affiche que 3 heures
   De plus, s'il reste 1 jour (ou heure, ou mi...), alors on enlève le s
   Modifier le script pour qu'il s'actualise toutes les secondes, cela évitera de recharger la page pour voir le temps restant
   Afficher un message d'erreur pour ceux qui n'ont pas leur JavaScript d'activé




Les mots et "s" en trop


Pour résoudre les deux premiers points, on peut remplacer ceci :


compte_a_rebours.innerHTML = prefixe + jours + ' jours ' + heures + ' heures ' + minutes + ' minutes et ' + secondes + ' secondes.';


Par :

var et = "et";
var mot_jour = "jours,";
var mot_heure = "heures,";
var mot_minute = "minutes,";
var mot_seconde = "secondes";

if (jours == 0)
{
jours = '';
mot_jour = '';
}
else if (jours == 1)
{
mot_jour = "jour,";
}

if (heures == 0)
{
heures = '';
mot_heure = '';
}
else if (heures == 1)
{
mot_heure = "heure,";
}

if (minutes == 0)
{
minutes = '';
mot_minute = '';
}
else if (minutes == 1)
{
mot_minute = "minute,";
}

if (secondes == 0)
{
secondes = '';
mot_seconde = '';
et = '';
}
else if (secondes == 1)
{
mot_seconde = "seconde";
}

if (minutes == 0 && heures == 0 && jours == 0)
{
et = "";
}

compte_a_rebours.innerHTML = prefixe + jours + ' ' + mot_jour + ' ' + heures + ' ' + mot_heure + ' ' + minutes + ' ' + mot_minute + ' ' + et + ' ' + secondes + ' ' + mot_seconde;



Je pense qu'une simple lecture devrait vous permettre de comprendre ce code.

Ré-actualisation automatique



Maintenant, passons à la ré-actualisation automatique du compte à rebours.

Pour cela, nous allons devoir englober notre code dans une fonction, que nous exécuterons toutes les secondes, grâce à la fonction setTimeout :

actualisation = setTimeout("compte_a_rebours();", 1000);



Cette ligne aura pour action de lancer la fonction compte_a_rebours() dans 1000 millisecondes (donc dans une seconde).
On l'ajoutant à la fin de notre fonction, celle-ci sera donc exécutée chaque seconde.
Pour l'appeler la première fois, il nous suffit de la faire exécuter après l'avoir fait déclarer.

On obtient :

function compte_a_rebours()
{
// Code que l'on a écrit auparavant

var actualisation = setTimeout("compte_a_rebours();", 1000);
}
compte_a_rebours();



Pour les utilisateurs n'ayant pas le JavaScript d'activé


Une dernière petite amélioration consiste à afficher un message d'erreur si le JavaScript n'est pas activé.

On remplace donc ceci :





Par :

Merci d'activer votre JavaScript.




La balise noscript n'affiche son contenu seulement si le JavaScript est désactivé.

Vous pouvez aussi, au lieu d'afficher ce message d'erreur pas toujours très agréable, afficher un texte manuellement pour dire quand ce termine le compte à rebours :

Fin de l'évènement le 1er janvier 2017.




Codes complets



Et voilà ! Tout devrait fonctionner.
Code:

<div id="compte_a_rebours"><noscript>Fin de l'évènement le 1er janvier 2017.</noscript></div>
<script type="text/javascript">
function compte_a_rebours()
{
var compte_a_rebours = document.getElementById("compte_a_rebours");

var date_actuelle = new Date();
var date_evenement = new Date("Jan 1 00:00:00 2017");
var total_secondes = (date_evenement - date_actuelle) / 1000;

var prefixe = "Compte à rebours terminé dans ";
if (total_secondes < 0)
{
prefixe = "Compte à rebours terminé il y a "; // On modifie le préfixe si la différence est négatif

total_secondes = Math.abs(total_secondes); // On ne garde que la valeur absolue

}

if (total_secondes > 0)
{
var jours = Math.floor(total_secondes / (60 * 60 * 24));
var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60));
minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60);
secondes = Math.floor(total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60 + minutes * 60)));

var et = "et";
var mot_jour = "jours,";
var mot_heure = "heures,";
var mot_minute = "minutes,";
var mot_seconde = "secondes";

if (jours == 0)
{
jours = '';
mot_jour = '';
}
else if (jours == 1)
{
mot_jour = "jour,";
}

if (heures == 0)
{
heures = '';
mot_heure = '';
}
else if (heures == 1)
{
mot_heure = "heure,";
}

if (minutes == 0)
{
minutes = '';
mot_minute = '';
}
else if (minutes == 1)
{
mot_minute = "minute,";
}

if (secondes == 0)
{
secondes = '';
mot_seconde = '';
et = '';
}
else if (secondes == 1)
{
mot_seconde = "seconde";
}

if (minutes == 0 && heures == 0 && jours == 0)
{
et = "";
}

compte_a_rebours.innerHTML = prefixe + jours + ' ' + mot_jour + ' ' + heures + ' ' + mot_heure + ' ' + minutes + ' ' + mot_minute + ' ' + et + ' ' + secondes + ' ' + mot_seconde;
}
else
{
compte_a_rebours.innerHTML = 'Compte à rebours terminé.';
}

var actualisation = setTimeout("compte_a_rebours();", 1000);
}
compte_a_rebours();
</script>
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

Compte à rebours en JavaScript

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» [RESOLU] Une sorte de compte à rebours
» Compteur à rebours
» Compte à rebours
» LE COMPTE A REBOURS.
» Afficher un décompte sous la forme M:S ??

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy  :: Caverne d'Alibaba du forum :: Outils Webmasters-