Horloge/compte à rebours sans personnalisation

[no_way]

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 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 ) 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-hhss 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. 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'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.

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par no_way. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.