© ilj ilj@flowsim.se
JavaScript på svenska 64
JavaScript klocka - visa tid med sifferbilder
kod & förklaringar längre ner på sidan


   
 




 
Så här ser koden ut:

<SCRIPT LANGUAGE = "JavaScript"
     TYPE="text/javascript">
<!--
function gettime()
{
     var datum = new Date() //
     iljhour=datum.getHours() //
     iljmin=datum.getMinutes() //
     iljsec=datum.getSeconds() //
     if(iljmin<10){iljmin="0"+iljmin} //
     if(iljhour<10){iljhour="0"+iljhour} //
     if(iljsec<10){iljsec="0"+iljsec} //
     iljhour=iljhour+"" //
     iljsec=iljsec+"" //
     iljmin=iljmin+"" //
}
if(document.images)
{
      gettime()
     iljdone=0
      bild=new Array()
      for(i=0;i<10;i++)
      {
     bild[i]=new Image()
      }
      for(i=0;i<10;i++)
      {
     bild[i].src=i+".gif"
      }
}

function showtime()
{
if(document.images && iljdone<600)
     {
      iljtimer=setTimeout("showtime()",1000)
     gettime()
     var startbild=0
     document.images[startbild+0].src=bild[iljhour.charAt(0)].src
     document.images[startbild+1].src=bild[iljhour.charAt(1)].src
     document.images[startbild+2].src="kolon.gif"
     document.images[startbild+3].src=bild[iljmin.charAt(0)].src
     document.images[startbild+4].src=bild[iljmin.charAt(1)].src
     document.images[startbild+5].src="kolon.gif"
     document.images[startbild+6].src=bild[iljsec.charAt(0)].src
     document.images[startbild+7].src=bild[iljsec.charAt(1)].src
     iljdone++
      }
}
//-->
</SCRIPT>

 
Koden här ovanför placeras i HEAD-delen (se MINIMANUAL 1 lite grunder).
 
Koden bygger på att de IMG-taggar där sifferbilderna ska visas är de första IMG-taggarna på sidan; om de inte är det måste siffran efter
startbild ändras. Om det finns en bild före klockan ska siffran ändras till en 1, finns det två bilder före ska den ändras till 2 etc
 
Koden bygger också på att de 10 sifferbilder man använder heter
0.gif, 1.gif, 2.gif etc, att kolonet representeras av en bild som heter kolon.gif och att bilder och HTML-fil ligger i samma mapp/ katalog.
 

 

 

 
Fyll i rätt WIDTH och HEIGHT i koden här nedanför; den delen av koden placeras där klockan ska visas.
 

<SCRIPT LANGUAGE="JavaScript"
     TYPE="text/javascript">
<!--
if((document.images)&&(iljdone<600))
     {
     document.write("<IMG SRC='")
     document.write(bild[iljhour.charAt(0)].src+"'")
     document.write("HEIGHT='12' WIDTH='6'>")
     document.write("<IMG SRC='")
     document.write(bild[iljhour.charAt(1)].src+"'")
     document.write("HEIGHT='12' WIDTH='6'>")
     document.write("<IMG SRC='kolon.gif'")
     document.write("HEIGHT='12' WIDTH='6'>")
     document.write("<IMG SRC='")
     document.write(bild[iljmin.charAt(0)].src+"'")
     document.write("HEIGHT='12' WIDTH='6'>")
     document.write("<IMG SRC='")
     document.write(bild[iljmin.charAt(1)].src+"'")
     document.write("HEIGHT='12' WIDTH='6'>")
     document.write("<IMG SRC='kolon.gif'")
     document.write("HEIGHT='12' WIDTH='6'>")
     document.write("<IMG SRC='")
     document.write(bild[iljsec.charAt(0)].src+"'")
     document.write("HEIGHT='12' WIDTH='6'>")
     document.write("<IMG SRC='")
     document.write(bild[iljsec.charAt(1)].src+"'")
     document.write("HEIGHT='12' WIDTH='6'>")
}
//-->
</SCRIPT>

 
Lägg till ett anrop (som alltså startar klockan) efter BODY ONLOAD, så här:
 
<BODY ONLOAD="showtime()">
 


 

 
Koden går att kopiera och använda som den är - men glöm inte att

  • ändra till rätt bredd (WIDTH) och höjd (HEIGHT)!
  • ev ändra siffran efter startbild
  • ev ändra siffran 600, på raden if(document.images&&iljdone<600), som reglerar hur länge klockan går

 

Fler JavaScript-exempel:
onmouseover
image/mouseover
variant
varannan dag
bildväxl/animering
välja bild i rullgardinsmeny
meddelandefönster
datum & tid
meddelande onLoad
onFocus
lastModified
image/mouseover
onblur
klocka
history
images/ animation
ändra bakgrundsfärg
timer
timer 2
rörlig text i textarea
JavaScript confirm
mer om datum
öppna nytt fönster 1
öppna nytt fönster 2
JavaScript prompt
JavaScript flytande lager
bildvisare med bildtexter
 
[fler JavaScript-exempel hittar du i menyn i ramen till vänster]
 
 

Sidan gjordes av
 
ilj
 
ilj@flowsim.se
 

 
Senast ändrad 23 februari 1999.
 
Den här sidan hör hemma i ett ramsystem
hos:
www.flowsim.se
JavaScript på svenska