Klokje op je pagina
Bij het openen van deze pagina verschijnt er een klokje in een venster.
Hier staat beschreven hoe je dat aanpakt.
De code staat onderaan deze bladzijde. Je kunt hem ook downloaden.
- De code bestaat uit een formulier in HTML en een eenvoudig stukje JavaScript.
- Het formulier heeft de naam Klokje. Het venster heeft de naam Tijd. Omdat alleen de pagina zelf gegevens naar dit venster mag schrijven, is het attribuut readonly meegegeven.
- Om het klokje op deze pagina goed te positioneren is gebruik gemaakt van een <table>, waaraan het attribuut align="right" is meegegeven. De border, cellspacing, etc. zijn zo gekozen dat het beoogde effect wordt bereikt. Dit kun je natuurlijk instellen zoals je zelf wilt.
- Het JavaScript bevat twee functions:
updateTime(), waarmee de klok wordt aangezet en bijgewerkt, en ClearClock, waarmee de klok wordt gestopt. - De klok wordt gestart bij het openen van de pagina, met behulp van de event-handler onLoad="updateTime()" in de <BODY>-tag.
- De klok wordt gestopt bij het verlaten van de pagina, met de event-handler onUnload="ClearClock()".
- Elke keer dat de function updateTime() wordt aangeroepen, wordt de systeemklok geraadpleegd. De huidige tijd wordt daar uitgehaald, en verdeeld in uren, minuten en seconden.
- Zo nodig wordt er een extra nul voor de minuten en seconden geplaatst.
- De zo ontstane string wordt in het venster gezet met document.Klokje.Tijd.value.
- De hulpvariabele st wordt gebruikt als referentie naar setTimeout. Elke seconde (1000 milliseconden) roept updateTime() zichzelf weer aan, waardoor de klok wordt bijgewerkt.
- De function ClearClock() gebruikt clearTimeout(st) om de klok de stoppen. Het is niet nodig om het klokje apart te verwijderen.
Gebruik:
- De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.
De code ziet er als volgt uit:
(Zet dit JavaScript bij voorkeur in de <HEAD>)
<script>
// Klokje in een venster op je pagina
// Door Ben Boukes, (c) 2002
// Vrij te gebruiken
var st = 0; // hulpvariabele
function updateTime() {
var nu = new Date(); // Systeem tijd
var min = nu.getMinutes(); // haal minuten uit nu
var sec = nu.getSeconds(); // haal seconden uit nu
var tijd = "De tijd is: " + nu.getHours() + ":"; // tijd met uren
if (min < 10) // voeg minuten toe
tijd += "0";
tijd += min + ":";
if (sec <10) // voeg seconden toe
tijd +="0";
tijd += sec;
document.Klokje.Tijd.value = tijd; // zet in het venster
// wacht 1 seconde en herhaal dan de actie
st = window.setTimeout("updateTime()",1000);
}
function ClearClock() { // Stop het klokje
window.clearTimeout(st);
}
</script>
(Neem deze attributen op in de <BODY>-tag)
onLoad="updateTime()" onUnload="ClearClock()"
(Zet deze code in de <BODY>, op de plaats waar het klokje moet komen)
<table border="0" cellspacing="0" cellpadding="10" align="right">
<tr><td align="center">
<form name="Klokje">De tijd is:<br>
<input type="text" name="Tijd" size="7" readonly>
</form>
</td></tr>
</table>
Downloaden:
Druk op de knop:
File: voorb052.zip, 781 bytes.
