Horloge/compte à rebours avec personnalisation

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Tutoriel Horloge/compte à rebours avec personnalisation

Message par no_way le Lun 15 Juin 2015 - 14:57

Horloge/Compte à rebours

Ce tutoriel vous permet de personnaliser l'affichage du tutoriel "Horloge/Compte à rebours".

Aperçu

Préparation

Il vous suffit d'avoir suivi la première partie du tutoriel à savoir Horloge/compte à rebours sans personnalisation.

Les options de base

De base l'horloge a déjà des propriétés de formatage de l'heure et du compte à rebours, les 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 (f_C et f_H), 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.


Warning 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


Bon, maintenant qu'on a vu les options disponibles, voyons comment les modifier.
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


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:
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 Wink


Dernière édition par no_way le Mar 28 Juil 2015 - 10:51, édité 1 fois (Raison : mise à jour)

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum