Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

Lav et ur til din hjemmeside


Velkommen til

I denne artikel skal du lære at lave et digitalt ur som du kan sætte ind på din side.
Til dette skal vi bruge en javascript funktion som hedder "Date()" som henter dagsdato.
Ud fra den kan vi så hente de forskellige elementer(timer, sekunder osv...).
Vi starter ud med vores grundkode:

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function klokken(){


  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <div id="visUr"><br /></div>
  12. </body>
  13. </html>

Det vi har gjort indtil videre er egentligt bare at lave et skelet som vi skal fylde ud.
Vi har lavet en funktion som hedder "klokken" det er den funktion vi skal bruge til at lave vores ur.
Så har vi lavet et lag som hedder "visUr" det i det lag vi skal vise klokken.

Nu skal vi igang med at fylde noget ind i vores funktion.
Det første vi gør er at smide "Date()" ind i en variabel så vi slipper for at skrive det hver gang.
Så vores funktion kommer til at se sådan her ud:
  1. function klokken(){
  2. var tid = new Date();
  3. }

Nu skal vi så til at trække de forskellige elementer ud som vi skal bruge, og vores ur skal vise "TT : MM : SS"

TT = Time
MM = Minut
SS = Sekund


Så først laver vi en varibel som indeholder "time".
  1. function klokken(){
  2. var tid = new Date();
  3. var time = tid.getHours();
  4. }

Det vi gør er at vi bruger getHours() til at hente timetallet ud fra variablen "tid".
Så skal vi gøre det sammen med minutter og sekunder.
  1. function klokken(){
  2. var tid = new Date();
  3. var time = tid.getHours();
  4. var minut = tid.getMinutes();
  5. var sekund = tid.getSeconds();
  6. }

Nu har vi 3 variabler som indeholder; time, minut og sekund. Nu skal vi bare vise dem frem.
Det gør vi ved at sætte "visUr""s "innerHTML" lig med vores variabler, men for at gøre det lettere laver vi en variabel som indeholder hele uret.
Læg mærke til at vi adskiller tallene med kolon ( : ).
  1. function klokken(){
  2. var tid = new Date();
  3. var time = tid.getHours();
  4. var minut = tid.getMinutes();
  5. var sekund = tid.getSeconds();
  6. var klokken = time+":"+minut+":"+sekund;

  8. document.getElementById("visUr").innerHTML = klokken;
  9. }

Hvis du ikke ved hvad; document.getElementById("visUr").value betyder, så kommer der en forklaring her:
Vi henter et element frem ved hjælp af elementets "ID" i vores tilfælde har vi lavet et lag som har id="visUr".
Det kan vi hente frem vha. "getElementById()".
Nu har vi faktisk et ur, men nu skal vi have det til at opdatere sig hvert sekunde, det gør vi vha. "window.setTimeout()".
window = udføres i det vindue som koden står i
setTimeout = Timeouter winduet (genstarter).

setTimeout har 2 parametre; "offer" og "interval".
offer = det den skal timeoute
interval = hvor ofte den skal timeoute.

Vi vil have at vores ur skal genstartes hver sekund for at få uret til at gå "RealTime".
Så vores funktion kommer til at se sådan her ud:
  1. function klokken(){
  2. var tid = new Date();
  3. var time = tid.getHours();
  4. var minut = tid.getMinutes();
  5. var sekund = tid.getSeconds();
  6. var klokken = time+":"+minut+":"+sekund;

  8. document.getElementById("visUr").innerHTML = klokken;
  9. window.setTimeout("klokken();",1000);
  10. }

her er det vores funktion "klokken" der er offeret, som skal genstartes hver sekund, (der regnes i tusindedele sekund).
Altså; 1000/1000 = 1. (1 Sekund).

Hvis du har afprøvet koden nu så vil du også vide at den ikke virker. :)
Det skyldes at vores funktion er skrevet i "<head></head>".
Og som vi alle ved, så udføres funktioner skrevet i head ikke før man kalder dem.
Derfor skal vi kalde vores funktion når siden er loadet færdig.
Det gøres ganske simpelt med:
  • <body onLoad="klokken();">

Der burde du selv kunne regne ud hvad der sker ;)

Nu virker vores ur faktisk fortræffeligt, men hvis lægger mærke til det så viser den ikke cifre hvis tallet er under 10.
Altså den skriver f.eks:
20:31:4 i stedet for 20:31:04, det kan vi rette vha et par simple if"er.

Vi tjekker bare om variablen er under 10, hvis den er skal der sættes et nul foran.
Her gør jeg det kun med "time" så kan du selv gøre det med de to andre.
  1. if(time<10){
  2. time = "0"+time;
  3. }

Så køre vores ur som bare pokker, og her er det færdige resultat.

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function klokken(){
  5. var tid = new Date();
  6. var time = tid.getHours();
  7. if(time<10){
  8. time = "0"+time;
  9. }
  10. var minut = tid.getMinutes();
  11. if(minut<10){
  12. minut = "0"+minut;
  13. }
  14. var sekund = tid.getSeconds();
  15. if(sekund<10){
  16. sekund = "0"+sekund;
  17. }

  19. var klokken = time+":"+minut+":"+sekund;

  21. document.getElementById("visUr").innerHTML = klokken;

  23. window.setTimeout("klokken();",1000);
  24. }
  25. </script>
  26. </head>
  27. <body onLoad="klokken();">
  28. <div id="visUr"></div>
  29. </body>
  30. </html>

Det var alt for denne gang, hvis du har spørgsmål til artikle så lad venligst være med skrive det i kommentarerne,
opret i stedet en forumtråd.

Mvh. Andreas

PS: Find flere af de scripts jeg har lavet på www.cases.hotserv.dk
Sidst redigeret 13:40 - 25/04/2006
Oprettet af:
__ak

Javascript

Point modtaget: 0

Rate:
20:34 03/04/2006

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
fin lille artikel man lære faktis noget om
koden men man behøvses vist nok ikke body onload="" :D
den får 4/5
Oprettet af:
freehtml
  Mail
14:15 04/04/2006
Hmm.
Fin artikkel
Oprettet af:
Michael
  Mail
13:44 07/04/2006
Ikke mere feedback?
Oprettet af:
__ak
  Mail
18:12 08/04/2006
Virkelig fed artikel! Den har hjulpet mig meget. Tusind tak :)

Du får en stuuur stuur dobbel 5-tal af maarj. :)
Sidst redigeret 19:33 - 08/04/2006
Oprettet af:
Kulidiwa
  Mail
19:32 08/04/2006
Qwaq: Gu behøver den da <body onLoad="klokken();"> ;)
Oprettet af:
__ak
  Mail
12:25 22/04/2006
Ville være rart med et link til et eksempl i dine artikler.. http://www.cases.hotserv.dk/javascript/case006/ :D
Oprettet af:
Spoilt
  Mail
19:13 28/04/2006
ok artikel
Oprettet af:
Ukendt bruger
  Mail
21:32 19/01/2007
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes