En klocka

En enkel och effektiv klocka är lätt att tillverka med javaskript. Vi kommer att använda objektet Date för att hämta timme, minut och sekund. Sedan snyggar vi till visningen en aning och stoppar in tiden i en textram. Men först litet teori.

Objektet Date

Date är ett av de objekt som finns inbyggda i JavaScript. Vi skapar ett nytt Date-objekt med metoden:

var Tiden = new Date()

Sedan kan vi utnyttja det här objektet till att skapa variabler som får sina värden genom de olika metoder som finns tillgängliga för Date().

Här följer några exempel på sådana metoder:

var manad = Tiden.getMonth()

Månaden från 0 (januari) till 11 (december)

var tid = Tiden.getTime()

Millisekunder sedan 1 januari 1970

var timme = Tiden.getHours()

Timmen från 0 (midnatt) till 23

var minut = Tiden.getMinutes()

Minuten från 0 till 59

var sekund = Tiden.getSeconds()

Sekunden (0 till 59)

var veckodag = Tiden.getDay()

Veckodagen från 0 (söndag) till 6 (lördag)

var datum = Tiden.getDate()

Dagen i månaden (1 till 31)

var ar = Tiden.getYear()

Årtalet med två siffor + 100 (Netscape) eller fyra siffror (Internet Explorer)

Vi tar två metoder till, även om vi inte kommer att använda dem i klockan.

var gmt = Tiden.toGMTString()

Ger veckodag, datum och tid som ett stränguttryck i Internets GMT-format:
Tue, 4 Feb 2003 00:36:58 UTC

var lokalt = Tiden.toLocaleString()

Ger datum och tid som ett stränguttryck i lokalt datum/tid-format:
den 4 februari 2003 01:36:58

Över till praktiken igen
I vår lilla klocka kommer vi att utnyttja tre av de här metoderna: getHours, getMinutes och getSeconds.

Koden ser ut så här:

I HEAD-elementet:

<SCRIPT language="JavaScript">
<!-- Göm
function startaKlockan()
{
var tidenNu=new Date();
var timmeNu=tidenNu.getHours();
var minutNu=tidenNu.getMinutes();
var sekundNu=tidenNu.getSeconds();
  if (timmeNu<10)
    timmeNu="0"+timmeNu;
  if (minutNu<10)
    minutNu="0"+minutNu;
  if (sekundNu<10)
    sekundNu="0"+sekundNu;
document.klockForm.startPlats.value="Klockan är " + timmeNu +":"+ minutNu +":"+ sekundNu;
setTimeout('startaKlockan()',1000);
}
// Sluta gömma -->
</SCRIPT>

I inledande BODY-taggen:

<BODY onLoad="startaKlockan()">

I BODY-elementet:

<FORM name="klockForm">
<INPUT type="text" name="startPlats" size="19" style="text-align: Center">
</FORM>

var tidenNu=new Date();
Funktionen startaKlockan() anropas från händelsehanteraren onLoad i den inledande BODY-taggen. Sedan deklareras ett nytt Date-objekt med namnet tidenNu.

var timmeNu=tidenNu.getHours();
Variabeln timmeNu utnyttjar objektet tidenNu för att hämta värdet för timme. Därefter gör variablerna minutNu och sekundNu samma sak med minut och sekund.

if (timmeNu<10) ... timmeNu="0"+timmeNu;
När vi skriver ut tiden i klockan, vill vi inte ha den visad som till exempel 21:1:13 – tidvisningen skall alltid använda två siffror vardera för timme, minut och sekund. När de tre variablerna timmeNu, minutNu och sekundNu har fått sina värden, undersöker vi därför om värdena är mindre än 10. I så fall ändrar vi värdet genom att lägga till en nolla före värdet.

document.klockForm.startPlats.value= ...
Detta betyder: "Skriv på den öppna sidan, i det formulär som heter klockForm, i den textruta som heter startPlats, in värdet ..." Sedan fyller vi på med det värde som skall användas – inom citationstecknen efter likhetstecknet anger vi sådant som inte förändras genom variablerna.

"Klockan är " + timmeNu +":"+ minutNu +":"+ sekundNu;
Sedan fyller vi på med det värde som skall användas – inom citationstecknen efter likhetstecknet anger vi sådant som inte förändras genom variablerna. Koden efter likhetstecknen ger alltså följande: "Klockan är nu timme:minut:sekund".

setTimeout('startaKlockan()',1000);
Det här viktiga tillägget gör att klockan uppdateras en gång i sekunder (1000 millisekunder).

BODY-taggen och FORM-taggen
Utöver skriptet lägger vi in en händelsehanterare i BODY-taggen och formuläret där tiden skall visas.

Lägg märke till style="text-align: Center" i FORM-taggen. Netscape och Internet Explorer visar textfälten som olika långa. För att hela texten skall få plats även i Netscape, gör vi raden längre än den behöver vara i Internet Explorer. Detta leder till att det blir "textrad över" i Internet Explorer, vilket är fult. Genom att lägga till det här stilattributet, centrerar vi texten så att den visas snyggt i båda webbläsarna.

Några variationer

Det här skriptet kan varieras mycket, och vi skall titta på några metoder i nästa avsnitt. Men redan här tar vi upp två variationer.

Inga sekunder
Känns det oviktigt att visa sekunderna? I så fall kan vi ta bort sekundvisningen, men ändå få klockan att uppdateras just när minuten växlar.

Koden kommer att se ut så här – jag kopierade några rader extra för att det skall vara lätt att se var ändringen görs:

  if (sekundNu<10)
    sekundNu="0"+sekundNu;
  if (sekundNu=="00");
{
document.klockForm.startPlats.value="Klockan är " + timmeNu +":"+ minutNu;
}
setTimeout('startaKlockan()',1000);

if (sekundNu=="00");
Den nya if-satsen undersöker om sekund = 00. I så fall – men bara då – kommer tiden att skrivas ut på skärmen.

Så länge sekundNu inte är lika med 00 hoppar koden inom klammerparenteserna efter if-satsen över och skriptkörningen fortsätter till raden setTimeout.

Glöm inte att justera längden på textrutan (size) i formuläret.

12-timmarsvisning
Vi tycker kanske att det är snyggare med 12-timmarsvisning – så att klockan visar 02:00 i stället för 14:00. Men när klockan är mitt på dagen skall det stå 12:00 inte 00:00. Vi ändrar i skriptet – även här har jag kopierat ett par rader extra för att visa var de båda nya raderna skall placeras::

  if (timmeNu<10)
    timmeNu="0"+timmeNu;
  if (timmeNu>12)
    timmeNu-=12;

if (timmeNu>12)
Om klockan är mer än 12:59:59 skall vi ändra timvisningen.

timmeNu-=12;
Här använder vi operatorn -= som fungerar så här: x-=y x=x-y. Här ger den resultatet att timmeNu blir lika med timmeNu minus 12. När klockan är 15 någonting, visar klockan 3 någonting.

© SupportData.Net