Ben's Hobbyhoekje -- Aftellen tot een bepaalde datum II: Aftelklok

Aftellen tot een bepaalde datum II: Aftelklok

Hiernaast zie je een soort advertentie voor het 25-jarig bestaan van deze website. Als je er met de muis overheen gaat, verschijnt er een aftel-klok.
Deze klok telt af tot 16 augustus 2026, 20:48 uur. Dat is het moment dat de eerste versie van deze website, in 2001, live ging.

Als de datum/tijd is gepasseerd zie je een melding dat het evenement bezig of al voorbij is.

Je kunt er ook op klikken. Dan verschijnt er een alert met meer informatie.

Op deze pagina wordt uitgelegd hoe je de aftel-klok maakt en hoe je de verschillende verschijningsvormen van de advertentie maakt. De volledige code van het voorbeeld kun je downloaden om zelf te gebruiken.

Er worden drie items besproken:
1. De werking van het script van de klok, in globale termen.
2. De werking van het script van de "advertentie", in globale termen.
3. Gebruiken in je eigen site.
De werking van het script: de klok
Het script staat in de file aftelklok.js. Dat hoef je niet te veranderen om he te laten werken.
Door het aanroepen van de function clockTargetInit() stel je de datum en het tijdstip in tot waar er wordt afgeteld.
clockTargetInit() heeft vijf parameters, die je allemaal moet invullen: dag, maand, jaar, uur, minuten.
Hierbij wordt opgemerkt: maand is een getal van 1 (=januari) tot en met 12 (=december). Dit wijkt af van wat je misschien gewend bent met JavaScript.
Allereerst wordt het tijdverschil bepaald. Dat is de datum en het tijdstip die je met clockTargetInit() hebt ingesteld, minus de datum en het tijdstip van 'nu'. Dat is een tijdsduur, uitgedrukt in milliseconden. Het wordt opgeslagen in variabele timeDifference.
Vervolgens wordt timeDifference bekeken:
- Als het aantal dagen in timeDifference groter is dan 100, wordt een melding gegeven dat het nog wel even duurt voor het evenement begint. Dit is een cosmetische ingreep, alleen bedoeld om de de opmaak van de klok niet te verstoren.
- Als timeDifference kleiner is dan nul, dan is het evenement al bezig of het is voorbij. Ook dat wordt op het scherm gemeld.
- In het andere geval wordt de klok ingesteld op de tijd die het nog duurt voor dat het evenement begint.
De klok begint te lopen zodra deze zichtbaar is. Dat wordt geregeld door de function toggleCDC(), die verderop in dit verhaal wordt beschreven.
De klok wordt elke 100 ms bijgewerkt, ofwel 10× per seconde. Dit geeft een goede werking.
De klok wordt gestopt zodra deze door de advertentie wordt bedekt. Dat scheelt rekenkracht van de processor.
De werking van het script: de advertentie
De advertentie wordt gemaakt met behulp van vier <div>-tags, die bij elkaar worden gehouden in een wrapper. De wrapper is zelf ook een <div>-tag. Deze heeft id="CDCwrapper".
Elk van de vier <div>-tags binnen de wrapper bevat een deel van de informatie:
- Het 'voorblad' (met de aankondiging van het evenement) heeft id="CDCcover".
- De aftelklok heeft id="CDCdisplay".
- De melding dat het evenement al bezig is heeft id="CDCoops1".
- De melding dat het nog meer dat 99 dagen duurt (en dat de klok daarom nog niet loopt) heeft id="CDCoops2".
N.B.: Alle variabelen en namen die hier gebruikt worden beginnen met CDC. Dat staat voor Count Down Clock. Dit is gedaan om verwarring met andere scripts te voorkomen.
De benodigde CSS staat in de file aftelklok.css. Die moet je aanpassen aan je eigen wensen.
De vijf <div>-tags en hun inhoud worden helemaal opgemaakt met CSS.
Ze moeten allemaal dezelfde afmeting hebben. Hier is dat width:300px; en height:220px. De wrapper heeft position:relative. De vier andere id's hebben position:absolute.
De wrapper mag behalve de vier <div>-tags geen andere informatie bevatten
De <div id="CDCdisplay"> bevat een tabel met twee rijen van elk vier cellen. In de bovenste rij verschijnen de berekende dagen, uren, minuten en seconden. Om dit bereikbaar te maken voor het JavaScript hebben deze cellen de id's CDCdays, CDChours, CDCminutes en CDCseconds. De tabelcellen opmaken gaat via de class CDCnumber.
De wrapper heeft drie event-handlers. Deze regelen het gedrag van de advertentie:
- onmouseover="toggleCDC('on')". Als je met de muis-aanwijzer boven de advertentie komt, kijkt toogleCDC() of: - Het nog meer dan 99 dagen duurt voordat het evenement begint. Als dat zo is wordt CDCoops2 zichtbaar gemaakt.
  - Het evenement al bezig of voorbij is. Als dat zo is wordt CDCoops1 zichtbaar gemaakt.
  Anders wordt de klok (in CDCdisplay) getoond en gestart
- onmouseout="toggleCDC('')". Hierdoor wordt de klok gestopt en komt de advertentie (in CDCcover weer in beeld.
- onclick="toonMelding()". Als je met de muis op de wrapper klikt (dus op de advertentie, de klok of een van beide meldingen), verschijnt er een alert met een verhaaltje over het evenement. Voor je eigen toepassing moet de function toonMelding() herschreven worden.
N.B.: De function toggleCDC() heeft één parameter: onoff. Als je hiervoor 'on' gebruikt zal geprobeerd worden de klok te starten. Anders wordt de klok gestopt en de advertentie getoond.
Omdat er gebruik gemaakt wordt van onmouseover en onmouseout, werkt het niet zo lekker met aanraakschermen zoals tablets en smartphones.
Inbouwen in je website
Begin met het linken van de CSS en het JavaScript, zoals aangegeven in onderstaande code.
Stel vervolgens de einddatum van de klok in door de parameterlijst van de function clockTargetInit() aan te passen. Tijdens de ontwikkeling is het handig om de einddatum niet te ver vooruit in de tijd te zetten.
Zet de wrapper met de vier <div>-tags in de HTML van de <body>.
Maak als eerste de advertentie op (CDCcover), daarna de klok (CDCdisplay).
Zet de einddatum van de klok op een datum in het verleden. Maak de melding in CDCoops1 op.
Zet de einddatum van de klok op een datum, 4 maanden in de toekomst. Maak de melding in CDCoops2 op.
Zet de einddatum van de klok op de startdatum en -tijd van het evenement. Je bent nu klaar.

Inspiratie voor het maken van deze pagina heb ik gevonden op de website van de zangeres King Bán: kingaban.nl. De klok is daar inmiddels niet meer te zien.

Gebruik:

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

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).

<link rel="stylesheet" href="aftelklok.css">
<script src="aftelklok.js"></script>
<script>
clockTargetInit(16,8,2026,20,48); // Eindmoment van de klok
// (dag,maand,jaar,uur,minuten; Hier: 16 aug. 2026, 20:48 uur)
</script>

(Zet dit in de <BODY>, op de plaats waar de advertentie moet verschijnen).

<div id="CDCwrapper" onmouseover="toggleCDC('on')"
onmouseout="toggleCDC('')" onclick="toonMelding()">
<div id="CDCoops1">
<h3>25 jaar Ben's Hobbyhoekje</h3>
<h1>Het evenement is nu bezig</h1>
<p>(Of het is al voorbij...)</p>
</div>
<div id="CDCoops2">
<h3>25 jaar Ben's Hobbyhoekje</h3>
<h1>Nog even geduld...</h1>
<p>Het duurt nog meer dan 99 dagen<br>
tot het evenement begint...</p>
<p style="font-size:80%; color:maroon">Vanaf 99 dagen is er een klok
die aftelt<br>tot het grote moment!</p>
</div>
<div id="CDCcover">
<div class="CDCcover">
<h1>Upcoming Event</h1>
<h3>25 jaar Ben's Hobbyhoekje</h3>
<h2>16 augustus 2026</h2>
<p>Een leuke hobby met HTML,<br>JavaScript en CSS</p>
</div>
<div align="right"><u>Lees meer >></u>   
   </div>
</div>
<div id="CDCdisplay">
<h3>Het begint over</h3>
<table cellspacing="5" cellpadding="5" border="0" align="center"><tr>
<td id="CDCdays" class="CDCnumber">00</td>
<td id="CDChours" class="CDCnumber">00</td>
<td id="CDCminutes" class="CDCnumber">00</td>
<td id="CDCseconds" class="CDCnumber">00</td>
</tr><tr>
<td class="CDCname">dagen</td>
<td class="CDCname">uren</td>
<td class="CDCname">min.</td>
<td class="CDCname">sec.</td>
</tr></table><br>
 <br>
<div align="right"><u>Lees meer >></u>   
   </div>
</div>
</div>

Downloaden:

Druk op de knop: File: voorb436.zip, 2647 bytes.

Opmerking:

Als je alleen een aftelklok wilt die constant in beeld is, kun je toe met een vereenvoudigde versie van deze klok.

00	00	00	00
dagen	uren	min.	sec.