Comment créer une mini horloge?

 

 

 

Ce tutoriel requiert un minimum de connaissances en html.

Il vous faut:  Paint Shop Pro .  Ici j' utiliserais le 8.

Tout d' abord, ouvrez PSP, faites ouvrir un nouveau document transparent de format 88*31
décorez le tel que vous souhaitez; animez-le si vous voulez.

Là ça se corse. Enregistrez votre image et transférez-la sur un serveur internet (permettant le hotlink).
Retenez bien l'URL de votre image.

Ouvrez le bloc note et copiez-y le code suivant:

 

<SCRIPT LANGUAGE="JavaScript">

<!--

//main clock functions

 

var clockid=new Array()

var clockidoutside=new Array()

var i_clock=-1

var thistime= new Date()

var hours=thistime.getHours()

var minutes=thistime.getMinutes()

var seconds=thistime.getSeconds()

if (eval(hours) <10) {hours="0"+hours}

if (eval(minutes) < 10) {minutes="0"+minutes}

var thistime = hours+":"+minutes

 

function writeclock() {

 i_clock++

 if (document.all || document.getElementById || document.layers) {

  clockid[i_clock]="clock"+i_clock

  document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")

 }

}

 

function clockon() {

 thistime= new Date()

 hours=thistime.getHours()

 minutes=thistime.getMinutes()

 seconds=thistime.getSeconds()

 if (eval(hours) <10) {hours="0"+hours}

 if (eval(minutes) < 10) {minutes="0"+minutes}

 thistime = hours+":"+minutes

  

 if (document.all) {

  for (i=0;i<=clockid.length-1;i++) {

   var thisclock=eval(clockid[i])

   thisclock.innerHTML=thistime

  }

 }

 

 if (document.getElementById) {

  for (i=0;i<=clockid.length-1;i++) {

   document.getElementById(clockid[i]).innerHTML=thistime

  }

 }

 var timer=setTimeout("clockon()",1000)

}

window.onload=clockon

//-->

</SCRIPT>

 

<table border="0" width='88' height='31' background="http:// votre url">

<tr>

        <td align="right" style="color:black; font-family: verdana; font-size: 9px;">

        <script>writeclock()</script>

        </td>

</tr>

</table>

Ne changez rien sinon la partie en rose pour y mettre l' url de votre image de toute à l' heure. Vous pouvez également changer les parties oranges qui correspondent successivement à la couleur de l' heure, la police et la taille des chiffres. Si vous n' y connaissez pas grand chose laissez  ces parties oranges..

 

A présent copiez-collez votre code dans le code source de votre site, à l'endroit où vous désirez que l' horloge apparaisse.

 

Voilà ;-)

 

 

 

 

 

 

Ce tutoriel vous pose des problèmes :

 

 

 

 Qu' avez-vous pensé de ce tutoriel? Laissez vos commentaires

 

 

 

Si ce tutoriel vous a permis de réaliser quelque chose pour votre site, vous seriez gentil si vous acceptiez de voter pour moi:

 


~ KissDesign TOP 100 ~

 

 

 

 


 Mystangel'Design - Tous droits réservés - 2005/2006