Klokje in de titelbalk
In de titelbalk van deze pagina staat een klokje en de datum van vandaag. Het klokje en de datum zijn ook te
zien in de kop van het browser-tabblad.
Op deze plaats wordt beschreven hoe je dat aanpakt.
Er wordt gebruik gemaakt van stukjes JavaScript die elders op deze site staan beschreven. Die worden hier niet herhaald. Links naar die beschrijvingen vind je hieronder.
De volledige code zoals die hier is gebruikt kun je downloaden, zie onderaan deze pagina.
- De technieken die hier worden gebruikt worden besproken in:
- html-018: Systeem-datum tonen op een web-pagina;
(Systeem datum ophalen en klaarmaken om te presenteren) - html-052: Klokje op je pagina;
(Lopend klokje maken) - html-076: De tekst van de titelbalk veranderen.
(Gegevens in de titelbalk zetten)
- html-018: Systeem-datum tonen op een web-pagina;
- De tekst van de titelbalk bestaat uit drie delen:
- De klok;
- de dag- / datum-aanduiding;
- de naam van de browser.
- Alvorens de klok te starten wordt de 'huidige' titel opgeslagen in de variabele tt.oud. (In geval is dat: 'Ben's Hobbyhoekje').
- Vervolgens worden de dag en de datum opgehaald en in de variabele DatumString gezet. Dat wordt
gedaan met behulp van de functies ToonDag() en ToonDatum().
Zie html-018; De functions staan in de file dagdatum.js. - Er wordt onderscheid gemaakt tussen schermopmaak met en zonder frames. Er wordt hier maar één
keer gekeken wat moet worden gebruikt. De naam van het vereiste object wordt vastgelegd in
de variabele tt. De functie SetTitle() gebruikt vervolgens tt.title om de aangepaste
titel op het scherm te zetten.
Zie html-076. - Wanneer de pagina in zijn geheel is geladen (de variabelen tt en DatumString hebben hun
waarde al gekregen!), wordt de functie SetTitle() aangeroepen via de event-handler in de <BODY>-tag:
onLoad="SetTitle()"
Deze functie verandert de titelbalk. De tekst wordt vervangen door een tijdsaanduiding met behulp van de function updateTime(), gevolgd door de inhoud van DatumString.
Zie html-052 voor een beschrijving van een lopend klokje. - SetTitle roept zichzelf elke seconde weer aan, via een aanroep van setTimeout. Hierbij wordt steeds de hele titelbalk vervangen.
- Bij het verlaten van deze bladzijde wordt de function ResetTitle() aangeroepen via de event-handler
in de <BODY>-tag:
onUnload="ResetTitle()"
Deze functie stopt de klok (via de aanroep van clearTimeout()) en zet de titelbalk terug in de oorspronkelijke toestand.
Gebruik:
- De code staat in de <HEAD>.
- Het starten en stoppen van het JavaScript programma staat in de <BODY>-tag.
De code ziet er als volgt uit:
(Zet deze JavaScripts in de <HEAD>)
<script src="dagdatum.js"></script>
<script >
/* Klokje met dag- datum aanduiding in de titelbalk
(c) 2002 Ben Boukes. Mag vrij worden gebruikt.
Voor goed functioneren van dit script
moet ook dagdatum.js worden ingevoegd!
*/
var st = 0; // hulpje: timer
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 = 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;
return tijd;
}
// Kies tussen Frames en Plain Page.
if (self != top) { // Frames. Verander de title van de parent
var tt = parent.document;
} else { // Plain page. Verander de title van het document
var tt = document;
}
var tt_oud = tt.title; // Bewaar de oorspronkelijke titel
var NuNu = new Date(); // Datum + tijd gegevens van de systeem klok
var DatumString = ' - ' + ToonDag(NuNu) + ', ' + ToonDatum(NuNu)
// Set de titelbalk
function SetTitle() {
tt.title = updateTime() + DatumString;
// wacht 1 seconde en herhaal dan de actie
st = window.setTimeout("SetTitle()",1000);
}
// Reset de titelbalk
function ResetTitle() {
window.clearTimeout(st); // Stop de klok
tt.title = tt_oud;
return;
}
</script>
(Breid de <BODY>-tag uit met de volgende attributen)
onLoad="SetTitle()" onUnload="ResetTitle()"
Downloaden:
Druk op de knop:
File: voorb083.zip, 1482 bytes.
Opmerking:
Natuurlijk kun je ook iets anders dan de dag en de datum achter het klokje zetten. Verwijder in dat geval de regel code
waarin var NuNu wordt aangemaakt en verander de regel code waarin var DatumString wordt aangemaakt.
Je hoeft dan de file dagdatum.js niet meer in te voegen.
