Horloge/compte à rebours sans personnalisation

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

  • 0

Tutoriel Horloge/compte à rebours sans personnalisation

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

Horloge/Compte à rebours

Ce tutoriel vous permet de créer une horloge ou un compte à rebours.

Aperçu


Préparation


Dirigez-vous dans:

Panneau d'administration Modules Gestion des codes Javascript
cliquez sur ajout Créer un nouveau javascript
puis remplissez le formulaire comme suit:
  • Titre: choisissez un titre qui soit explicite.
  • Placement: sur toutes les pages.
  • Code Javascript:
    Code:
    var horloge=function(cible,options){
    try{
     if(!cible.length||!(cible.tagName||(cible instanceof jQuery&&cible[0].tagName)))throw 'cible ne représente pas un élément';
     this.cible=cible;
     this.options=options||this.optionsParDefaut();
     }catch(e){console.log(e)}
     };
     horloge.prototype={
          /*récupération de l'heure*/
          heure:function(){try{
     var d=new Date(),date=[],i,h,m,s,r=this,t,u,v=this.options.f_H;
     h=d.getHours();m=d.getMinutes();s=d.getSeconds();
     date["h"]=h<10?"0"+h:""+h;
     date["m"]=m<10?"0"+m:""+m;
     date["s"]=s<10?"0"+s:""+s;
     for(i in date){
     for(t=0;t<date[i].length;t++){date[i+(t+1)]=date[i][t];}
     }
     /*Actions*/
     t=v.match(/\{[jhms][0-9]?\}/g);
     for(i in t){
     v=v.replace(t[i],(u=date[t[i].slice(1,-1)])?u:"mode "+t[i]+" inconnu")
     }
     this.cible instanceof jQuery?this.cible.html(v):this.cible.innerHTML=v;
     /**/
     setTimeout(this.heure.bind(this),1000)
     }catch(e){console.log(e)}},
     /*mode a rebours*/
     a_rebours:function(date_cible){try{
     var d=new Date(),date=[],dc=date_cible,dfs,i,j,h,m,s,r=this,t,u,v=this.options.f_C;
     dc=dc.split(/\D/);
     if(dc.length!=6){this.options.cible.html("Date non valide");return false};
     dc=dc.map(function(e){return parseInt(e)});
     dc=((t=dc[2])<10?"0"+t:t)+"-"+((t=dc[1])<10?"0"+t:t)+"-"+((t=dc[0])<10?"0"+t:t)+"T"+((t=dc[3])<10?"0"+t:t)+":"+((t=dc[4])<10?"0"+t:t)+":"+((t=dc[5])<10?"0"+t:t);
     dc=new Date(dc);
     dfs=parseInt((dc.getTime()>d.getTime())?(dc.getTime()-d.getTime())/1000:0);
     s=dfs%60;dfs-=s;
     j=parseInt(dfs/0x15180);dfs-=j*0x15180;
     h=parseInt(dfs/3600);dfs-=h*3600;
     m=dfs/60;
     date["j"]=""+j;
     while(date["j"].length<parseInt(this.options.n_J)){
     date["j"]="0"+date["j"];
     }
     date["h"]=h<10?"0"+h:""+h;
     date["m"]=m<10?"0"+m:""+m;
     date["s"]=s<10?"0"+s:""+s;
     for(i in date){
     for(t=0;t<date[i].length;t++){
     date[i+(t+1)]=date[i][t];
     }
     }
     /*Actions*/
     t=v.match(/\{[jhms][0-9]?\}/g);
     for(i in t){
     v=v.replace(t[i],(u=date[t[i].slice(1,-1)])?u:"mode "+t[i]+" inconnu")
     }
     this.cible instanceof jQuery?this.cible.html(v):this.cible.innerHTML=v;
     /**/
     this.instance_a_rebours=setTimeout(this.a_rebours.bind(r,date_cible),1000);
     if(0>=parseInt((dc.getTime()>d.getTime())?(dc.getTime()-d.getTime())/1000:0)){clearTimeout(this.instance_a_rebours);this.fin_a_rebours()}
     }catch(e){console.log(e)}},
     fin_a_rebours:function(){try{/*votre code*/}catch(e){console.log(e)}},
          optionsParDefaut:function(){return {
          /*options de base*/
          /*taille fixe jours*/
          n_J:3,
          /*format Horloge*/
          f_H:'{h}:{m}:{s}',
          /*format Compte a rebours*/
          f_C:'{j} jours {h}:{m}:{s}'
          }}
          };

Validez

La syntaxe

var x=new horloge(cible[,{options}]);
Dans ce code "cible" est obligatoire et représente un élément de votre page qui va recevoir le contenu de l'horloge,cible peut être en pur javascript ou en jQuery, ainsi si vous avez une DIV avec pour id "mon-horloge", vous pouvez écrire:
Code:
var x=new horloge(document.getElementById("mon-horloge"));
ou
Code:
var x=new horloge($("#mon-horloge"));

Ne vous occupez pas du paramètre "options", vous n'en avez pas besoin.


A cette étape l'horloge n'affiche toujours rien, il faut appeler une des deux méthodes de "horloge".

La première se nomme "heure" (pas très original Rolling Eyes ) elle se contente d'afficher l'heure, pour l'appeler il vous suffit de faire:
Code:
x.heure();

La seconde se nomme "a_rebours" et vous permet de créer un compte à rebours en lui donnant une date au format français à savoir:
JJ/MM/AAAA-hh:mm:ss
par exemple:
Code:
x.a_rebours("25/12/2015-00:00:00")

Installation

Maintenant que la syntaxe de base a été vue, placez dans votre forum le code HTML suivant:
Code:
<span id="id_horloge"></span>
Vous pourriez être tentés de mettre ce code en annonce ou dans un widget par exemple.

Warning Si vous utilisez l'éditeur, prenez soin à être dans le bon mode d'édition, l'icône :wysiwyg: doit être sur fond blanc (éditeur en mode source):

Si ce n'est pas le cas, cliquez sur la-dite icône pour basculer le mode d'édition.

Une fois la partie HTML faite, vous pouvez à nouveau créer un nouveau JavaScript comme précédemment:
Panneau d'administration Modules Gestion des codes Javascript
Ajoutez ce code-ci pour afficher l'heure:
Code:
$(function(){
var x=new horloge($("#id_horloge"));
x.heure();
});
ou ce code-ci pour un compte à rebours:
Code:
$(function(){
var x=new horloge($("#id_horloge"));
x.a_rebours("25/12/2015-00:00:00");
});
Vous pouvez bien entendu modifier la date et "id_horloge" selon vos besoins Wink

Personnaliser l'affichage

Si vous voulez personnaliser l'affichage, à savoir ne pas vous contenter d'un affichage texte, rendez-vous dans la deuxième partie de ce tutoriel Horloge/compte à rebours avec personnalisation.



Dernière édition par no_way le Lun 27 Juil 2015 - 23:57, é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