Forum Crea illusion Fantasy
A quoi sert le forum ?
Ce forum est liée à mon site Crea illusion Fantasy. Un plus pour vous aidez dans vos créations.Vous ne savez pas créer, et vous recherchez une création personnalisée. Le forum vous écoutera vos demandes.
Plusieurs sections :
Des aides: pour votre forum,votre site ou blog.Des tutoriels(photoshop,paintshop,gimp,photofiltre,ect...).Demandes de créations personnalisées. Aide pour prendre en main vos logiciels.Des tutos, des scripts. aides pour le logiciel Flash..... Des concours, des challenges, des duels. Vous y trouverez un accueil sympathique.
Au plaisir de vous lire sur le forum. D'autres choses à venir découvrir sur le forum de Créa illusion Fantasy.

N'hésitez pas à venir vous inscrire.


Aides & Conseils pour le graphisme & forum & site web & blog & tout autres supports.
 
AccueilPortailFAQPublicationsPublicationsS'enregistrerConnexion
Votre bannière ici,Faite la demande dans la catégorie: La place Public


Partagez | .
 

 Compte à rebours en JavaScript

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Ptite_Perle
Admin


avatar


Messages : 6726
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 8990

MessageSujet: Compte à rebours en JavaScript   Ven 25 Sep - 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

-
» Supprimer le compte à rebours
» Compte à rebours avec jours, heures, minutes, secondes
» [RESOLU] Une sorte de compte à rebours
» Un script pour générer un compte a rebours sur image
» compte-à-rebours avant la sortie d'un film

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