Ben's Hobbyhoekje -- Klokje op je pagina II

Klokje op je pagina II

Hier rechts zie je een digitaal klokje. De tijd wordt weergegeven in de twaalf-uren klok, in uren, minuten en seconden. Daarbij wordt aangegeven of het vóór (VM), of ná (NM) de middag is.
Op deze pagina wordt uitgelegd hoe je zoiets maakt voor je eigen website. De code staat onderaan de pagina. Die kun je ook downloaden om zelf te gebruiken.

Er worden twee items besproken:
1. De werking van het script.
2. Inbouwen in je eigen site.
Dit script is mij toegestuurd door een gebruiker van deze website. De maker is mij niet bekend.
Voor deze pagina heb ik de code wat gemoderniseerd en opgeschoond. Commentaren zijn vertaald in het Nederlands. Een kleine onvolkomenheid in het instellen van "VM" en "NM" is gecorrigeerd.
De werking van het script
De code van het voorbeeld is gemaakt met HTML, CSS en JavaScript. Alle code staat in het document, maar de CSS en het JavaScript kunnen ook in aparte bestanden staan.
HTML
De HTML is een <table> met klasse tabBlock. Die klasse wordt gebruikt om het klokje op te maken. De tabel heeft één rij, met twee cellen.
De eerste cel heeft id="lc" en klasse clock. De id is voor de communicatie met JavaScript, de klasse is voor de opmaak.
De tweede cel bevat een (geneste) tabel met twee rijen, elk met één cel.
De bovenste cel bevat 'VM' of 'NM' en heeft id="dc_hour" en klasse clocklg, voor de communicatie met JavaScript resp. de opmaak.
De onderste cel bevat de seconden en heeft id="dc_second" en klasse clocklg, voor de communicatie met JavaScript resp. de opmaak.
De <body>tag bevat het attribuut onload="digitized()", waardoor de JavaScript-function digitized() wordt opgestart als de pagina is geladen.
CSS
De CSS bestaat uit drie klassen, tabBlock voor de tabel, clock voor de uren en minuten, en clocklg voor VM/NM en de seconden.
clock en clocklg gebruiken het font "Orbitron". Dat is een Google-font, dat met een <link rel="stylesheet">-tag vanuit de <head> wordt aangehaakt. Zie ook het item Niet-standaard fonts gebruiken uit externe bronnen.
JavaScript
Er zijn twee functions: digitized() en Ticking().
digitized() is de hoofd-function. Deze function haalt de tijd uit de systeemklok en zet de uren, minuten en seconden in de variabelen hrs, min en sec.
Als hrs groter is dan 12, wordt er 12 van af getrokken. Dit wordt opgeslagen in hrs2.
Als hrs groter is dan, of gelijk is aan 12 wordt 'NM' ingesteld, anders 'VM'.
Als min en / of sec kleiner is dan 10, wordt er door de function Ticking() een nul voor gezet.
Al deze informatie wordt in de innerHTML van de drie tabelcellen gezet. Dat gaat via de id's van de cellen en getElementById().
Inbouwen in je eigen site
Download de .zip-file en pak hem uit.
Bouw de code op in je document zoals hieronder is aangegeven. De CSS en het JavaScript kunnen ook in aparte bestanden staan.
De HTML zet je in je document op de plaats waar de klok moet verschijnen. Meestal is dat bovenaan, maar ergens halverwege kan ook. De positie in de regel verander je door float en margin van .tabBlock te wijzigen.
Binnen .clock en .clocklg kun je het font en de lettergrootte wijzigen. Denk daarbij ook aan het gelinkte Google-font. Kleuren kun je overal in de CSS wijzigen.
De HTML en het JavaScript moeten ongewijzigd blijven.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css"/>
<style>
.tabBlock {
float:right;
margin:0 10px 15px 40px;
background-color:#57574f;
border:0;
border-radius:5px;
max-width:200px;
overflow:hidden;
}
.clock {
vertical-align:middle;
font-family:Orbitron;
font-size:40px;
font-weight:normal;
color:#fff;
padding:0 10px;
}
.clocklg {
vertical-align:middle;
text-align:center;
font-family:Orbitron;
font-size:20px;
font-weight:normal;
color:#fff;
}
</style>
<script>
function digitized() { // Wordt gestart als de pagina is geladen
var dt = new Date(); // Systeem-datum
var hrs = dt.getHours();
var hrs2 = (hrs > 12) ? hrs - 12 : hrs;
var min = Ticking(dt.getMinutes());
var sec = Ticking(dt.getSeconds());

document.getElementById('dc').innerHTML = hrs2 + ":" + min;
document.getElementById('dc_second').innerHTML = sec;

if (hrs > 12) document.getElementById('dc_hour').innerHTML = 'NM ';
else document.getElementById('dc_hour').innerHTML = 'VM ';

// Elk seconde de klok verzetten
var time = setInterval('digitized()', 1000); }
function Ticking(ticVal) {
if (ticVal < 10) ticVal = "0" + ticVal;
return ticVal;
}
</script>

(Zet dit in de <BODY> op de plaats waar het klokje moet verschijnen).

<table class="tabBlock" cellspacing="0" cellpadding="0" border="0"><tr>
<td class="clock" id="dc"></td> 
<td><table cellpadding="0" cellspacing="0" border="0"></tr>
<td class="clocklg" id="dc_hour"></td>
</tr><tr>
<td class="clocklg" id="dc_second"></td>
</tr></table>
</td>
</tr></table>

(Neem onderstaand attribuut op in de <BODY>-tag).

onload="digitized()"

Downloaden:

Druk op de knop: File: voorb311.zip, 981 bytes.