Aftellen tot een bepaalde datum IV: Eenvoudige Aftelklok
| XX | XX | XX | XX |
| dagen | uren | min. | sec. |
Hier rechts zie je een aftelklok. Als je deze pagina opent telt deze af naar 25 december van dit jaar, 12:07 uur. Als dat tijdstip is gepasseerd staat de klok op nul en loopt deze dus niet verder.
Deze aftelklok is een vereenvoudigde versie van een aftelklok die elders op deze site staat. De code van dit voorbeeld staat onderaan de pagina. Je kunt hem ook downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- Het script berekent het tijdsverschil (in milliseconden) tussen 'nu' en de ingestelde eindtijd. Het 'nu' is de systeemtijd van de PC.
- Uit het tijdsverschil wordt het aantal dagen, uren, minuten en seconden berekend dat de klok nog moet lopen.
- Vervolgens worden die getallen in de klok op het scherm gezet en wordt de actie herhaald.
- De klok wordt elke 0,1 seconde bijgewerkt. De klok heeft daardoor een goede nauwkeurigheid.
- Als de klok is afgelopen (dagen, uren, minuten en seconden allemaal gelijk aan nul) gebeurt er niets. Als je op dit moment
wilt reageren, dan kan dat eenvoudig door op de variabele clockFinished te letten. Bij het starten van de klok staat
deze op
false. Als de klok is afgelopen wordt dezetrue. - Als je wilt dat er een actie wordt ondernomen als de klok is afgelopen, moet je dat zelf schrijven. Het beste doe je dat
met JavaScript. Je zou een function kunnen maken die een alert geeft, code genereert, enz. Die function roep je aan vanuit
de file aftelklok.js. Zet de aanroep op de plaats van de regel:
// Hier je code die wordt gestart als de klok is afgelopen
- Inbouwen in je eigen site
- De berekeningen voor deze klok worden uitgevoerd met JavaScript, dat staat in de file aftelklok2.js. De opmaak van de klok gaat met CSS, die staat in de file aftelklok2.css. Beide bestanden link je in de <head> van je webdocument.
- Vervolgens roep je de function clockTargetInit() aan. Ook dat doe je in de <head>.
- Deze function heeft vijf parameters, die je allemaal een waarde moet geven: dag, maand, jaar, uur
en minuten. Hiermee geef je het moment aan waarop de klok moet stoppen (lees: Het begin van de gebeurtenis waar naar
toe wordt afgeteld).
N.B.: In het voorbeeld wordt de parameter jaar berekend. Dat zorgt ervoor dat deze klok elk jaar aftelt naar Eerste kerstdag, 12:07 uur. - In de <body> zet je de benodigde HTML-code neer. Dat is een <div>-tag met klasse CDCwrapper, met daarbinnen een tabel van twee regels. De eerste regel heeft vier cellen, waarin de looptijd van klok verschijnt. In de tweede regel staat de betekenis van de getallen erboven, ook verdeeld over vier cellen.
- Elk van de cellen van de eerste regel heeft class="CDCnumber". Dit is voor de opmaak van de getallen.
- Elk van de cellen in de eerste regel heeft een uniek id: CDCdays, CDChours, CDCminutes en CDCseconds. Deze id's worden door JavaScript gebruikt om de klok bij te werken.
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="aftelklok2.css">
<script src="aftelklok2.js"></script>
<script>
// Eindmoment van de klok (dag,maand,jaar,uur,minuten)
var ff = new Date();
clockTargetInit(25,12,ff.getFullYear(),12,7);
</script>
(Zet dit in de <BODY>, op de plaats waar de klok moet verschijnen).
<div id="CDCwrapper">
<table cellspacing="5" cellpadding="5" border="0" align="center"><tr>
<td id="CDCdays" class="CDCnumber">XX</td>
<td id="CDChours" class="CDCnumber">XX</td>
<td id="CDCminutes" class="CDCnumber">XX</td>
<td id="CDCseconds" class="CDCnumber">XX</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>
</div>
Downloaden:
Druk op de knop:
File: voorb440.zip, 1867 bytes.
