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.