Aller au menu - Aller au contenu

Icône Un compte à rebours en PHP

Par Avatar SpriteWare
Mise à jour : 28/05/2010
Difficulté : Facile Facile Creative Commons BY-NC-SA
299 visites depuis 7 jours, classé 341/786
Salut les Zéros !

Je vais ici vous apprendre comment faire un compte à rebours en PHP, avec une petite touche de JavaScript pour ceux qui en veulent plus. Vous verrez, il n'y a rien de plus simple, et quelquefois on va chercher dans le bien compliqué inutilement (j'ai été dans ce cas :p ).

Je vous propose de faire, tout au long de ce tutoriel, un TP. Nous apprendrons à faire un compte à rebours avant Noël. (C'est vrai quoi, qui n'est pas pressé d'être à Noël ? :ange: )
==> Ce que vous saurez faire dans pas très très longtemps...
==> Et en JavaScript...


Compétences requises :
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Bases du script

Comme je vous l'ai dit, notre petit script fera en sorte de calculer le temps qu'il reste jusqu'à Noël. Pour ce faire, nous allons utiliser le timestamp. Puis, nous calculerons la différence entre le timestamp actuel et le timestamp de Noël prochain.


Pour commencer, nous allons créer le timestamp du prochain Noël :
Changement de programme ! Est-ce plus palpitant d'attendre le 24 ou l'ouverture des cadeaux ? :D Personnellement, chez moi on les ouvre à 8h, car ma petite sœur croit toujours au Père Noël. À vous d'adapter en fonction de votre situation.


Dans la suite du tutoriel, je continuerai de citer le mot « Noël ». J'entends par là, bien sûr, l'ouverture des cadeaux, comme je l'ai dit plus haut.

Il ne faut pas oublier que nous cherchons à calculer le Noël prochain avec date('Y').


Code : PHP
1
2
3
4
<?php
$annee = date('Y');
$noel = mktime(8, 0, 0, 12, 25, $annee); // Le timestamp du 25 décembre de l'année actuelle à 8h00 (ouverture des cadeaux).
?>

Voilà qui est fait ! Toutefois, nous avons négligé un détail : imaginez que nous sommes le 26 décembre. Le compteur va donc être réglé sur le Noël qui vient de passer vu que l'année, elle, sera toujours la même. ;) Le compteur sera donc en négatif, sauf si nous appliquons une condition simple à notre code :

Code : PHP
1
2
3
4
5
6
7
8
<?php
$annee = date('Y');
$noel = mktime(8, 0, 0, 12, 25, $annee);
		
 if ($noel < time())
 $noel = mktime(8, 0, 0, 12, 25, ++$annee);

?>

Pourquoi as-tu placé le signe de l'incrémentation avant $annee ? :o

Il s'agit de la pré-incrémentation (au contraire de la post-incrémentation pour $annee++). La valeur de la variable est d'abord incrémentée d'une unité puis renvoyée, alors que dans l'autre cas, c'est l'inverse. D'où l'utilité de faire un ++$annee ici. ;)
De cette manière, nous avançons d'une année, et cela, (au risque de me répéter) tout simplement car nous cherchons à calculer le Noël PROCHAIN ! ;)


Bon ensuite, il faut que l'on récupère la différence entre le timestamp actuel et celui de Noël. Cette différence sera donc le temps qu'il nous reste (en secondes) avant d'ouvrir les cadeaux !

Récapitulatif :
Code : PHP
1
2
3
4
5
6
7
8
9
<?php
$annee = date('Y');
$noel = mktime(8, 0, 0, 12, 25, $annee);
		
 if ($noel < time())
 $noel = mktime(8, 0, 0, 12, 25, ++$annee);

 $tps_restant = $noel - time(); // Différence entre Noël et maintenant.
?>


Avez-vous compris le principe ? Jusque là, c'était assez facile.
Maintenant devinez ce qu'il nous reste à faire pour afficher des jours, des minutes, etc. ?

Terminer le tuto ? :euh:

Aussi, mais je pensais plutôt à convertir toutes ces secondes en durées plus courantes ; car un compte à rebours qui indique « 13459054423 secondes restantes » (par exemple), c'est pas pratique. :D
Retour en haut

Les conversions

Nous arrivons dans la deuxième partie du tuto, et la plus coriace. Jusqu'ici, nous avons construit un script qui nous renvoie le temps restant en secondes. Et ce temps là, nous allons le transformer en quelque chose de plus lisible.

Vous savez quoi ? Je vais vous laisser chercher un peu ! :D

  • utilisez le modulo % pour prendre un reste d'une division ;
  • utilisez floor() pour arrondir ;
  • pensez à la division par 60 !


Pom... pom... pom... Fini ? :ninja:

Allez, ne vous torturez pas plus, je vais vous expliquer ma solution : j'ai divisé le temps restant par 60 pour obtenir les minutes, puis les minutes par 60 pour obtenir les heures, et pour finir, les heures par 24 pour obtenir les jours. Ce qui me donne ça :

Code : PHP
1
2
3
4
5
<?php
$i_restantes = $tps_restant / 60; // Minutes restantes
$H_restantes = $i_restantes / 60; // Heures restantes
$d_restants = $H_restantes / 24; // Jours restants
?>


À ce stade, j'espère que vous avez déjà écarquillé les yeux sur ma façon de faire, qui a l'air fausse. Sinon, relisez ! Car en effet elle l'est. Pourquoi ? Car en fin de compte, c'est comme si notre compteur nous disait :
Citation
Il reste tant d'heures, ou si vous préférez tant de minutes, ou...

Et ainsi de suite. Cette méthode revient à traduire le timestamp restant en plusieurs unités de mesure temporelle. Vous suivez ? :-°

Nous ce qu'on veut c'est que SI il reste 32 heures, le compte à rebours indique « 1 jour et 8 heures restants ». :)
Pour ça, on va prendre le reste des divisions grâce au modulo (%). C'est-à-dire que s'il y a un peu plus d'un jour, on convertira le reste en heures.

Vous avez compris ? Application du raisonnement :
Code : PHP
1
2
3
<?php
$H_restantes = $H_restantes % 24;
?>

C'est au reste de la division de $H_restantes par 24 qu'est maintenant égal $H_restantes. ;)

Pour finir, appliquons ces changements avec un petit mixage « floor() + % » pour arrondir les restes :
Code : PHP
1
2
3
4
5
6
<?php
$s_restantes = floor($tps_restant % 60); // Secondes restantes
$i_restantes = floor($i_restantes % 60); // Minutes restantes
$H_restantes = floor($H_restantes % 24); // Heures restantes
$d_restants = floor($d_restants); // Jours restants
?>


Si vous avez mal compris cette partie, relisez-la, c'est important d'avoir bien compris mon raisonnement. Je sais que c'est dur de comprendre un code que vous n'avez pas fait, mais c'est important de ne pas recopier bêtement. Je vous parle en connaissance de cause, c'est d'ailleurs ce qui m'a amené à faire ce tutoriel. Je ne comprenais rien à ce que faisaient les autres, alors j'ai essayé de réfléchir par moi-même. :)
Retour en haut

Finalisation & améliorations

Nous voici à la dernière étape ! Comme nous avons le script de fonctionnement, rien de plus simple que d'afficher les résultats !

Code : PHP
1
2
3
4
<?php
echo 'Il reste exactement <strong>'. $d_restants .' jours</strong>, <strong>'. $H_restantes .' heures</strong>,'
    . ' <strong>'. $i_restantes .' minutes</strong> et <strong>'. $s_restantes .'s</strong> avant d\'ouvrir les cadeaux <:o).';
?>


Pour finir, que diriez-vous d'afficher la date dans la page ? Pour cela, nous allons utiliser les fonctions setlocale() et strftime() pour afficher la date en français :
Code : PHP
1
2
3
4
5
6
<?php
setlocale(LC_ALL, 'fr_FR');

echo 'Nous sommes le '. strftime('<strong>%d %B %Y</strong>, et il est <strong>%Hh%M</strong>') .'.<br />'

?>



Ça y est, nous avons fini ! :magicien:
Pour les retardataires, voici le script entier :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
$annee = date('Y');
$noel = mktime(8, 0, 0, 12, 25, $annee);
		
 if ($noel < time())
 $noel = mktime(8, 0, 0, 12, 25, ++$annee);

 $tps_restant = $noel - time(); // $noel sera toujours plus grand que le timestamp actuel, vu que c'est dans le futur. ;)

//============ CONVERSIONS

$i_restantes = $tps_restant / 60;
$H_restantes = $i_restantes / 60;
$d_restants = $H_restantes / 24;


$s_restantes = floor($tps_restant % 60); // Secondes restantes
$i_restantes = floor($i_restantes % 60); // Minutes restantes
$H_restantes = floor($H_restantes % 24); // Heures restantes
$d_restants = floor($d_restants); // Jours restants
//==================

setlocale(LC_ALL, 'fr_FR');

echo 'Nous sommes le '. strftime('<strong>%d %B %Y</strong>, et il est <strong>%Hh%M</strong>') .'.<br />'

   . 'Il reste exactement <strong>'. $d_restants .' jours</strong>, <strong>'. $H_restantes .' heures</strong>,'
   . ' <strong>'. $i_restantes .' minutes</strong> et <strong>'. $s_restantes .'s</strong> avant d\'ouvrir les cadeaux <:o).';

?>


Améliorations


Maintenant, il ne vous reste plus qu'à faire un joli design de Noël. :D
Si vous souhaitez en savoir plus, et améliorer votre compte à rebours en voyant le temps restant défiler, rendez-vous dans l'annexe qui suit. ;)

Vous pouvez aussi rajouter un système de mois : c'est exactement la même démarche à suivre que celle que nous avons vue ensemble. (Et pourquoi pas des années ? Soyons fous !)
Retour en haut

Annexe : allons plus loin avec JavaScript !

Tiens, vous revoilà ? ^^
Je savais que vous seriez curieux. Je vais vous apprendre ici comment faire ce compte à rebours avec le langage JavaScript. Ce langage s'exécute du côté utilisateur, ce qui va nous permettre de voir le temps défiler. Néanmoins, je déconseille à tous ceux ne s'y connaissant pas de s'aventurer par ici. Car le copier / coller sans rien comprendre, ça n'avance à rien !

Compétences requises :



Bon, eh bien allons-y ! :-°


Tout d'abord, nous allons préparer le « terrain » avec cette portion de code (x)HTML, qu'il faudra placer en haut du script :
Code : HTML
1
2
3
<body>
<p id="affichage"></p>
</body>


Fait ? Poursuivons !
Nous allons commencer par déclarer notre fonction CompteARebours().
Code : JavaScript
1
2
3
4
function CompteARebours()
{
// Notre script ici
}

Une fonction ? Mais on n'en avait pas besoin en PHP ! :o

Effectivement, mais nous avons besoin de placer notre script dans une fonction pour ensuite faire appel à une autre fonction nommée « setInterval() », qui rappellera la fonction toutes les x millisecondes, et donc qui actualisera le temps restant.

Ensuite, vous verrez, rien de compliqué. En fait, nous allons poursuivre les mêmes étapes qu'en PHP : c'est-à-dire que nous allons d'abord déclarer les deux « timestamps » (pour parler PHP :lol: ), et ensuite la condition qui permet le compte à rebours jusqu'à Noël prochain :

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function CompteARebours()
{
    var date_actuelle = new Date(); // On déclare la date d'aujourd'hui.
    var annee = date_actuelle.getFullYear();

    var noel = new Date(annee, 11, 25, 8, 0, 0); // On déclare la date de Noël.
				
	 if (noel.getTime() < date_actuelle.getTime()) // Si Noël est dépassé, on passe au Noël suivant !
	 noel = new Date(++annee, 11, 25, 8, 0, 0); // On re-déclare Noël pour qu'il ne soit pas passé.
        
        // Reste du script.
}


Remarquez que dans l'argument du mois, j'ai tapé « 11 ». Il faut tout simplement tenir compte du fait que les mois commencent à partir de 0 (tiens, comme vous, bizarre hein ? :D ), donc janvier sera égal à 0, et décembre à 11. C'est à l'origine de pas mal d'erreurs, et de casse-tête.


Maintenant, rien de plus simple, nous allons recopier bêtement la soustraction des deux timestamps ainsi que les conversions. Pour arrondir, nous allons utiliser Math.floor(). Bien sur, sans oublier qu'en JavaScript les timestamps sont exprimés en millisecondes, une division pour obtenir des secondes s'impose donc :

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
var tps_restant = noel.getTime() - date_actuelle.getTime(); // Temps restant en millisecondes

//============ CONVERSIONS

var s_restantes = tps_restant / 1000; // On convertit en secondes
var i_restantes = s_restantes / 60;
var H_restantes = i_restantes / 60;
var d_restants = H_restantes / 24;


    s_restantes = Math.floor(s_restantes % 60); // Secondes restantes
    i_restantes = Math.floor(i_restantes % 60); // Minutes restantes
    H_restantes = Math.floor(H_restantes % 24); // Heures restantes
    d_restants = Math.floor(d_restants); // Jours restants
//==================


Nous voici presque à la fin : nous allons afficher les résultats. :) Pour afficher le mois en français, nous allons utiliser la bonne vieille méthode du tableau contenant les mois. Ensuite, rien de plus facile que d'afficher le texte avec document.getElementById("affichage").innerHTML :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var mois_fr = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');

var texte = "Nous sommes le <strong>" +date_actuelle.getDate()+ " " +mois_fr[date_actuelle.getMonth()]+ " " +date_actuelle.getFullYear()+ "</strong>," +
            " et il est <strong>" +date_actuelle.getHours()+ "h" +date_actuelle.getMinutes()+ "</strong>.<br />";

    texte += "Il reste exactement <strong>" +d_restants+ " jours</strong>, <strong>" +H_restantes+ " heures</strong>," +
         " <strong>" +i_restantes+ " minutes</strong> et <strong>" +s_restantes+ "s</strong> avant d'ouvrir les cadeaux <:o).";


document.getElementById("affichage").innerHTML = texte;



Pour finir, nous allons faire en sorte de rappeler la fonction toutes les secondes, pour qu'elle se mette à jour, avec setInterval(fonction, millisecondes) (Sans oublier de fermer la fonction avant !) :
Code : JavaScript
1
2
}
setInterval(CompteARebours, 1000); // Rappel de la fonction toutes les 1000 millisecondes (toutes les secondes quoi !).


Et voilà le travail ! Vous devriez obtenir ce résultat. Encore une fois, il est possible d'améliorer ce script pour qu'il rende mieux. Moi, par exemple, j'ai affiché les dixièmes de secondes après la virgule, ça rend sympa en JavaScript ! En plus, vous connaissez déjà le principe, c'est pas bien dur. :-°

Notez que si vous souhaitez afficher les dixièmes de secondes, n'oubliez pas de diminuer le délai de la fonction setInterval à 100.


Attention, le script en JavaScript calcule le temps restant à partir de l'heure du visiteur, contrairement au script PHP, qui affiche en fonction du serveur !
Retour en haut
Voilà tout ! Si vous avez des questions, n'hésitez pas à me contacter par MP, et me faire des remarques par le biais des commentaires.
Bonne continuation à vous ! ^^
Retour en haut

Partager

Retour en haut
53 commentaires pour "Un compte à rebours en PHP"
Note moyenne : 3.00 / 4 (31 votes)
Pseudo Commentaire
Hors ligne SpriteWare # Posté le 28/08/2011 à 11:27:43
J'ai un string dans l'Array
Avatar

Avis : Très bon
close

Ville : Nantes
Pays : France métropolitaine

 La conversion est nécessaire pour calcule le temps restant. Dans ton code, tu n'affiche que la date actuelle, ce n'est pas l'effet désiré :)
Image utilisateur

Nekoro: Un jeu de plateforme 2D codé en JS & HTML5, avec canvas

(lien direct vers le site)

 
Hors ligne death's-head # Posté le 22/01/2012 à 09:41:18
Avatar

 Désolé SpriteWare pour le temps de réponse je n'étais encore jamais revenu sur les commentaires mais je tiens quand même a me justifier :)

Il est vrai que le script que j'ai fait à la va vite pour illustrer le principe ne sert qu'a afficher la date, mais j'ai utiliser cette fonction pour convertir des dates dans d'autres test et sa marche pour tout les mktime donc pour reprendre ton idée:
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?php
$année = date('Y');
$noel = mktime(8, 0, 0, 12, 25, $année);

if($noel < time())
$noel = mktime(8, 0, 0, 12, 25, ++$année);

$tps_restant = $noel - time();

//convertion + affichage:

echo 'Il reste exactement <strong>'. date('m', $tps_restant) .' mois</strong>, <strong>'. date('d', $tps_restant) .' jours</strong>, <strong>'. date('H',$tps_restant) .' heures</strong>,'
   . ' <strong>'. date('i', $tps_restant) .' minutes</strong> et <strong>'. date('s', $tps_restant) .'s</strong> avant d\'ouvrir les cadeaux <:o).';
 ?>


Sa fait la même chose que ton code (je viens de tester), c'est plus court et sa affiche les mois :p !
Hors ligne SpriteWare # Posté le 22/01/2012 à 18:48:57
J'ai un string dans l'Array
Avatar

Avis : Très bon
close

Ville : Nantes
Pays : France métropolitaine

 Tout à fait, ton code est vraiment correct !

Néanmoins, tu te vente que les mois sont affichés : et si je ne veut pas les afficher ? Le problème avec ton script c'est que le format de sortie n'est pas modulable.
En effet, si le compte à rebours s'étale sur plusieurs années, on devra forcément afficher les années, puis les mois, puis les jours, puis etc.... C'est assez embêtant.

J'ai trouvé aussi un autre problème avec ton script : contrairement au mien, il ne soustrait pas les jours restants au mois restants par exemple. Par exemple, il reste actuellement 12 mois d'après ton script, sauf que c'est faux : il reste 11 mois + x jours + y heures, + z minutes, + etc....

Tu m'dira on peut aussi enlever "1" aux mois...
Enfin bref, pour un tutoriel destiné au débutants, cette méthode est assez hasardeuse, son fonctionnement est complexe, le résultat imprécis...

Je ne pense donc pas que je vais mettre à jour ce tutoriel pour expliquer cette méthode. En plus l'intérêt du tutoriel était aussi de comprendre le système de conversions, assez complexe.
M'enfin si tu réussi à me pondre un système plus maniable, précis, etc.. que le mien, je t'invite à le partager ^^

Bonne continuation !
Image utilisateur

Nekoro: Un jeu de plateforme 2D codé en JS & HTML5, avec canvas

(lien direct vers le site)

 
Hors ligne Akemi # Posté le 30/04/2012 à 18:33:42
www.japon.comyr.com
Avatar

 Le serveur que j'utilise est à l'heure.

Il est écrit :
"Attention, le script en JavaScript calcule le temps restant à partir de l'heure du visiteur, contrairement au script PHP, qui affiche en fonction du serveur !"

J'aimerais savoir quel est le script en JS en fonction de l'heure du serveur et non du visiteur ?

Merci d'avance !
エロディー
Au Pays du Soleil Levant
Site traitant le Japon et permettant d'apprendre le japonais :)

[SDZ] Présentation de mon projet
 
Hors ligne SpriteWare # Posté le 01/05/2012 à 16:31:02
J'ai un string dans l'Array
Avatar

Avis : Très bon
close

Ville : Nantes
Pays : France métropolitaine

 Le tutoriel n'explique pas comment récupérer l'heure du serveur.

Ce que tu peux faire, c'est récupérer (en l'affichant dans la page ou par requête Ajax) le timestamp de l'heure du serveur. Ensuite tu "parse" ce timestamp de façon a avoir un timestamp utilisable en javascript. Après tu appliques les memes calculs que dans le tutoriel, mais n'oublie pas de décrémenter ton timestamp en fonction du temps de ton setInterval.

Sinon, va poser ton problème sur le forum :)
Image utilisateur

Nekoro: Un jeu de plateforme 2D codé en JS & HTML5, avec canvas

(lien direct vers le site)

 

Voir tous les commentaires