Tuto : créer une horloge pour votre forum

Kirua666 · Le 28/05/2007, à 13:01

Voila, en modifiant le code de l'horloge de animekaos, j'ai réussis à faire ma propre horloge ^^
regardez :
http://jeumanga.hbg.fr/hikaruclock.html

je peu pas vous mettre l'horloge en direct, il faudrai que les admin de fok mettent l'autre version des fenêtres de réponses...

je n'ai vu aucune interdiction de s'inspirer du code de l'horloge animekaos. Si qqn considère que c'est une violation de "propriété" lol, qu'il me le dise, j'enleverai ce tuto

bon, maintenant je vous explique comment faire :

Ce qu'il vous faut :

-un éditeur html / php etc (comme notepad++) ou un simple logiciel de texte (comme Bloc notes)

-les images que vous voudrez utiliser pour votre horloge
(l'idéal serai d'en avoir environ 7 ...
si vous en avez plus vous ne pourez pas toute les utiliser, à moin de rajouter des lignes au code....
si vous en avez moin, il sufira simplement de mettre plusieur fois la même)

-un hébergeur

et c'est tout (bien sur, il faut le code, mais je vais le donner plus bas)

1 er étape :
hébergez vos images avec servimg ou image shack

2ème étape :

copiez le code suivant dans votre éditeur de code / logiciel de texte :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>nom de votre horloge</title>

<style type="text/css">

</style>
<script language="JavaScript">
var mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }
function lZ(x){ if (x<=9)
x='0' + x;
return x; }
function getPic(){ image="";
switch(tS().getHours())
{ case 8: image=getrandompic();
break;
case 9: image=getrandompic();
break;
case 10: image=getrandompic();
break;
case 11: image=getrandompic();
break;
case 12: image="votre image par défault (choisisez) ";
break;
case 13: image="votre image par défault (choisisez) ";
break;
case 14: image=getrandompic();
break;
case 15: image=getrandompic();
break;
case 16: image=getrandompic();
break;
case 17: image=getrandompic();
break;
case 18: image=getrandompic();
break;
case 19: image="votre image par défault (choisisez) ";
break;
case 20: image="votre image par défault (choisisez) ";
break;
case 21: image=getrandompic();
break;
case 22: image=getrandompic();
break;
default: image="votre image par défault (choisisez) ";
break;
}
return image; }
function getrandompic()
{ var nbPic = 7;
var pic = new Array(nbPic); var ranNum= Math.round(Math.random()*(nbPic-1));
pic[0] = "votre image n°0 (choisisez) "; pic[1] = "votre image n°1 (choisisez) ";
pic[2] = "votre image n°2 (choisisez) ";
pic[3] = "votre image n°3 (choisisez) ";
pic[4] = "votre image n°4 (choisisez) ";
pic[5] = "votre image n°5 (choisisez) ";
pic[6] = "votre image n°6 (choisisez) ";
return pic[ranNum];
}
function UpdateClock()
{
document.body.style.background="url('" + getPic() + "') fixed no-repeat" ;
ak = '<a href="http://www.animekaos.fr" style="text-decoration:none" target="_blank" Title="le titre de votre horloge">';
clock = ak + tS().getDate() + ' ' + mN[tS().getMonth()] + ' ' + lZ(tS().getHours()) + ':' + lZ(tS().getMinutes()) + '</a>';
if (document.getElementById){
document.getElementById("chibi-clock").innerHTML=clock;
}
setTimeout("UpdateClock()", 30000)
}
window.onload = UpdateClock;
</script>
</head>
<body>
<div id="chibi-clock" style="position: absolute; top: la position à laquelle vous voulez mettre l'heure sur l'image (si vous avez un emplacement précis, faites plusieurs essais pour la mettre dessus, sinon, mettez une taille un peu suppérieur à celle de l'image pour faire apparaitre l'heure en dessous) (le nombre et les px sont attache : exemple 100px)px; width: la position à laquelle vous voulez mettre l'heure sur l'image (si vous avez un emplacement précis, faites plusieurs essais pour la mettre dessus, sinon, mettez une taille un peu suppérieur à celle de l'image pour faire apparaitre l'heure en dessous) (le nombre et les px sont attache : exemple 100px)px; text-align: center;">init</div>
</body>
</html>

remplacez les zones en rouge par ce qui correspond
enregistrez le ficheir sous le nom que vous voulez en format htm ou html (extension .htm ou .html)
3ème étape

envoyez votre image sur votre hébergeur

4ème étape :
mettez ensuite ce code dans votre éditeur, et faite ce qui correspond :

<iframe src="l'adresse du fichier que vous avez envoyés" width="la taille qui correspond à votre image" height="la taille qui correspond à votre image" scrolling="no" frameborder="no" allowtransparency="true" border="0"
framespacing="0"></iframe>

puis mettez sur votre forum le code obtenu

Kirua666 · Le 28/05/2007, à 16:17

je voi que bc de monde est interessé

Compte anonymisé · Le 29/05/2007, à 18:00

Oui, c'est une horloge en javascript, quoi.
Ca ne serait pas plus à sa place en Dévellopement - Programmation ?

Haplo · Le 29/05/2007, à 19:57

en meme temps, je ne suis pas sur qu'il y ai foule entre 13h et 16 heures...

naholyr · Le 29/05/2007, à 20:32

Ça sert à quoi une horloge sur un site web ?

wilituning · Le 29/05/2007, à 20:38

naholyr a écrit :

Ça sert à quoi une horloge sur un site web ?

A évité de baissé les yeux

MDR :lol::lol::lol:

Kirua666 · Le 29/05/2007, à 21:59

lol
c'est ce que je disai à un copain, ça sert juste à décorer, rien de plus.
Tout les ordi (ou presque... mdr j'oubli pas win32... bien qu'il avait peut être l'heure)
bon, sans déc, tout les ordi ont l'heure dans la barre de tache lol... donc c'est juste pour décorer, pourtant ça marche bien, pleins de fofo en ont

naholyr · Le 29/05/2007, à 22:08

C'est d'une bêtise absolue : pour décorer on met une image, pas un truc en Javascript qui va au pire faire ramer les machins faiblardes et au mieux gêner la navigation.

Compte anonymisé · Le 30/05/2007, à 00:15

Je n'irais pas jusqu'à la bêtise absolue, mais c'est en effet un gadget relativement inutile, sauf pour apprendre le javascript (souvenirs, souvenirs, l'horloge et le calendrier en javascript )

Splitsch · Le 30/05/2007, à 10:40

Salut!
Ben, je dis pas que chacun doit le mettre sur sont site
Mais bon, c'est à mon avis juste un "exercice" que Kirua666 a fait, pour voir si il en était capable, c'est tout, faut pas voir plus loin, à mon avis...
Même si c'est sur que ca sert à rien pour nous, ca lui a servis à apprendre...
Après, de la pertinence à venir le poster ici, c'est autre chose, mais bon, on est au café
Aplus!

Sk8inmars · Le 30/05/2007, à 14:50

Super, un vol de code....

Compte anonymisé · Le 30/05/2007, à 15:24

Sk8inmars a écrit :

Super, un vol de code....

Je n'ai vu aucun copyright.
Tu pourrais préciser ?

Qui plus est Kirua666 s'interroge dès son premier post sur la légalité de son affaire, dit qu'il n'en sait rien en toute bonne foi et laisse le soin aux modos de supprimer son post le cas échéant.

Tu es au moins très sévère avec lui.

Kirua666 · Le 30/05/2007, à 18:13

j'ai fait une horloge pour un forum, et j'ai mis le tuto pour le faire ici pour en faire profiter les autres...
Mais je n'ai pas vu de droits sur le code, sinon je n'aurai pas fait ce topic.... c'est pour ça que je dis que si c'est illégal, que qqn me le dise

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 28/05/2007, à 13:01

Tuto : créer une horloge pour votre forum

#2 Le 28/05/2007, à 16:17

Re : Tuto : créer une horloge pour votre forum

#3 Le 29/05/2007, à 18:00

Re : Tuto : créer une horloge pour votre forum

#4 Le 29/05/2007, à 19:57

Re : Tuto : créer une horloge pour votre forum

#5 Le 29/05/2007, à 20:32

Re : Tuto : créer une horloge pour votre forum

#6 Le 29/05/2007, à 20:38

Re : Tuto : créer une horloge pour votre forum

#7 Le 29/05/2007, à 21:59

Re : Tuto : créer une horloge pour votre forum

#8 Le 29/05/2007, à 22:08

Re : Tuto : créer une horloge pour votre forum

#9 Le 30/05/2007, à 00:15

Re : Tuto : créer une horloge pour votre forum

#10 Le 30/05/2007, à 10:40

Re : Tuto : créer une horloge pour votre forum

#11 Le 30/05/2007, à 14:50

Re : Tuto : créer une horloge pour votre forum

#12 Le 30/05/2007, à 15:24

Re : Tuto : créer une horloge pour votre forum

#13 Le 30/05/2007, à 18:13

Re : Tuto : créer une horloge pour votre forum

Pied de page des forums