Hvordan å gjøre en klokke i HTML

Hvordan å gjøre en klokke i HTML


Commercial Web utvikling pakker er ofte fullpakket med spesialverktøy som gjør det mulig for utviklere å lage nettsider med en rekke bjeller og fløyter for å forbedre det visuelle på hver side med et minimum av manuell koding. Utviklere som foretrekker hands-on banen for oppretting og økt kontroll HTML-koding tilbud, legger iøynefallende detaljer, som en klokke som automatisk oppdaterer uten å laste siden, betyr ikke nødvendigvis slippe HTML til fordel for en annen kodingsmetode . Forsterke streng HTML med segmenter av Javascript kan oppnå nesten ethvert kreativt oppgaven du ønsker å vise.

Bruksanvisning

1 Åpne siden i HTML-kildefilen i et program eller tekstredigeringsprogram.

2 Finn posisjonen på siden der du vil plassere klokken.

3 Sett inn følgende kode i <body> -delen av HTML-filen:

<Script type = "text / javascript">

funksjon GetClock () {

d = new Date ();

N time = d.getHours ();

nmin = d.getMinutes ();

if (nmin <= 9) {nmin = "0" + nmin}

document.getElementById ( 'clockbox') innerhtml = "" + N time + ":" + nmin + ".";

setTimeout ( "GetClock ()", 1000);

}

window.onload = GetClock;

</ Script>

<Div id = "clockbox"> </ div>

4 Lagre endringene i kildefilen og lukke redaktør.

Hint

  • Denne enkle stykke kode viser gjeldende tid i en 24-timers digitalt format og viser automatisk den oppdaterte tiden omtrent hvert minutt. Bruken av setTimeout (1000) gjør bruk av prosessorens klokkehastigheten å bestemme oppdateringsfrekvensen. Dette varierer noe med den type og hastighet av prosessoren.
  • Størrelsen, font og farge på den viste klokke kan endres ved å legge inn HTML-visningsverdier inne i <div> tag.