Horloge/compte à rebours avec personnalisation

par no_way Lun 15 Juin 2015 - 14:57

Horloge et / ou compte à rebours (avec personnalisation)

Cette astuce vous permet de personnaliser une horloge et / ou un compte à rebours. Cette astuce fait suite à l'astuce horloge et / ou compte à rebours (sans personnalisation).

Voir illustration :

Prérequis

Il vous suffit d'avoir suivi la première partie du tutoriel à savoir horloge et / ou compte à rebours (sans personnalisation).

Les options

Les options de base

De base, l'horloge a déjà des propriétés de formatage de l'heure et du compte à rebours que voici :

n_J:exclusivement utilisée pour le compte à rebours, cette propriété est une valeur numérique indiquant la longueur fixe pour l'affichage des jours, par défaut cette propriété est à 3 ainsi si vous placez la date à une semaine l'horloge donnera "007", on voit bien qu'elle a rajouté des zéros à gauche pour atteindre la longueur de 3 caractères ;
f_C:exclusivement destinée à l'affichage du compte à rebours, c'est une chaîne de caractères par défaut à {j} jours {h}:{m}:{s} ;
f_H:exclusivement destinée à l'affichage de l'heure, c'est une chaîne de caractères par défaut à {h}:{m}:{s}.

{h},{m},{s}... késako ?

Afin d'être vraiment personnalisable, l'horloge remplace le contenu des propriétés d'affichage (font=code-in-line]f_C[/font] et font=code-in-line]f_H[/font]), ainsi:

{j} : représente les jours dans leur intégralité, si le compte à rebours est dans une semaine {j} sera remplacé par 007 ;
{h} : représente les heures dans leur intégralité, si il est 13h24min12s {h} sera remplacé par 13 ;
{m} : représente les minutes dans leur intégralité, si il est 13h24min12s {m} sera remplacé par 24 ;
{s} : représente les secondes dans leur intégralité, si il est 13h24min12s {s} sera remplacé par 12.

D'autres possibilités sont offertes lors du formatage, vous pouvez afficher la valeur des heures, minutes etc. par caractère. C'est très utile si vous souhaitez utiliser des images pour votre horloge au lieu du texte, pour cela il vous suffit de faire suivre la lettre par la position du caractère voulu.

Reprenons l'exemple précédent, il est 13H24min12s :

{h1} vaut 1 et {h2} vaut 3 puisque {h} vaut 13 et que le premier caractère de 13 est 1 et le deuxième est 3.

Remarque : si vous demandez une position de caractère qui n'existe pas, l'horloge vous le signalera via un message indiquant le souci rencontré, exemple non valide : "{h3}".

Modifier les options

Maintenant que nous avons vu les options disponibles, voyons comment les modifier. Si vous avez suivi l'astuce horloge et / ou compte à rebours (sans personnalisation), il faut modifier le script dont le nom est "Horloge" et / ou "Compte à rebours". Pour modifier une option il suffit de faire comme suit :

Code:: variable.options.option=valeur;

Voici un exemple où on souhaite afficher des images pour l'heure :

Code:: x.options.f_H='<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />';

Il faut toujours modifier les options avant appel de "heure" ou "a_rebours".

Ce code est valide :

Code:: $(function() { var x = new horloge($("#id_horloge")); x.options.f_H = '<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />'; x.heure(); });

mais pas celui-ci :

Code:: $(function() { var x = new horloge($("#id_horloge")); x.heure(); x.options.f_H = '<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />'; });

Exécuter du code à la fin du compte à rebours

Si vous avez suivi l'astuce horloge et / ou compte à rebours (sans personnalisation), il faut modifier le script dont le nom est : [Script général] Horloge et /ou compte à rebours. Lorsque le compte à rebours arrive à zéro, une fonction est automatiquement lancée, son nom est "fin_a_rebours", par défaut elle ne fait absolument rien mais il est possible de la redéfinir ainsi [Script général] Horloge et /ou compte à rebours :

Code:: x.fin_a_rebours=function(){try{ votre code javascript }catch(e){console.log(e)}};

Cette possibilité est fournie pour ceux qui voudraient changer le fond de leur forum lorsque le compte à rebours est terminé par exemple.