Klocka HTML-mallar

Klock-HTML-mallar för digitala, analoga och världstidsvisningar

Ett klockgränssnitt har en enda synlig uppgift: att visa aktuell tid så att man kan läsa av den på en sekund. Klock-HTML-mallar tillhandahåller koden för visningen och resten av källfilerna, redo att redigeras och publiceras på ditt eget webbhotell. Inuti kan det finnas en digital tidsvisning, en analog urtavla eller en översikt med stadskort.

Att välja mellan siffror och urtavlor

En digital visning är den enklare utgångspunkten som knappt kräver mer än behållare för timmar, minuter och sekunder. En markör för AM/PM eller en växling mellan 12- och 24-timmarsvisning brukar placeras intill dem. En analog urtavla fungerar annorlunda, eftersom urtavlan, timmarkeringarna och visarna var och en behöver ett eget element innan ett skript sätter dem i rörelse.

De flesta klockgränssnitt byggs upp av några välbekanta delar:

• tidsvärden med en separat plats för sekunder
• tim- och minutvisare över en graderad urtavla
• en datumrad, veckodagsangivelse eller larmsymbol
• ett stadsnamn och en tidsförskjutning för varje extra tidszon

Det är vid stadskorten som koden börjar upprepas, eftersom en översikt med åtta städer använder samma block åtta gånger. Nicepage Grid Repeater hanterar detta mönster, och dokumentationen för Grid Repeater Element förklarar hur ett enda objekt definierar layouten för många poster. Produktrader för väggklockor upprepas på samma sätt.

Kod som uppdateras varje sekund

Två helt skilda saker ryms under samma benämning här. Ibland skrivs tiden in statiskt i filen och rör sig aldrig, vilket fungerar för en skärmdump men blir missvisande i produktion. En fungerande klocka behöver JavaScript för att läsa av lokal tid och skriva tillbaka den till de förberedda elementen, medan en nedräkning tillämpar samma idé baklänges mot ett slutdatum.

Sekundvisaren är det ärliga testet. En demo kan se övertygande ut utan att något körs bakom kulisserna, så en förhandsgranskning är värd några sekunder av din tid.

Läsbarhet på små skärmar

Klockor läses av från längre avstånd än de flesta andra gränssnittselement. Siffror som ser eleganta ut på en datorskärm kan bli en grå smet på en telefon på en armlängds avstånd, och en tunn sekundvisare försvinner lätt mot ett detaljrikt fotografi.

Vad man brukar justera i efterhand är sifferstilen, visarnas tjocklek samt om displayen ska vara ljus eller mörk. Kontrast är avgörande, eftersom en klocka som ingen kan läsa av med en snabb blick har misslyckats med sitt enda syfte. Det underlättar att tidigt bestämma vad du bygger, eftersom en enskild klocka, en tidszontavla och en nedräknare startar från helt olika element.