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 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 syntaxevar 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 ) 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  ss par exemple:- Code:
x.a_rebours("25/12/2015-00:00:00")
InstallationMaintenant 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.
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 
Personnaliser l'affichageSi 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.
|