Ben's Hobbyhoekje -- Systeem-datum tonen op een web-pagina

Systeem-datum tonen op een web-pagina

Linksboven op het scherm staan de datum en de tijd weergegeven van het moment waarop deze pagina is geopend. Hier staat beschreven hoe je dat aanpakt.

De code staat onderaan deze bladzijde. Je kunt hem ook downloaden.

De code bestaat uit drie delen:
- Opslaan van de namen van maanden en weekdagen in arrays (in de <HEAD>).
- Functies voor het tonen van de weekdag, de datum en de tijd (in de <HEAD>).
- Opvragen van de systeemdatum bij de PC en aanroep van die functies om de gegevens op het scherm te krijgen (in de <BODY>).
Als eerste worden twee lijsten (arrays) gemaakt: maanden en dagen. Hiervoor wordt new Array gebruikt. Deze worden gevuld met gegevens.
Merk op dat de arrays beginnen te tellen bij nul. Een array met 7 elementen telt dus van 0 tot en met 6.
Een andere methode voor het maken en vullen van een array is:
dagen = new Array("Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag")
De functies ToonDag, ToonDatum en ToonTijd (de namen spreken voor zichzelf) hebben alle drie dezelfde parameter: Datum. Dit is een datum object dat vlak voor de aanroep van de functies wordt aangemaakt en gevuld met de systeem-datum en -tijd:
var Nu = new date().
De functie ToonDag geeft de weekdag weer. Hiervoor wordt de lijst dagen gebruikt. Referentie gebeurt met de methode getDay() van het datum-object: 0 voor zondag, 1 voor maandag, enz.
De functie ToonDatum gebruikt voor het weergeven van de maand dezelfde aanpak als in ToonDag, alleen wordt nu de methode getMonth() gebruikt. Hier geldt: 0 = januari, 1 = februari, enz.
Het jaartal wordt opgehaald met getYear(). Bij sommige oudere browsers kan dit fout gaan. Het jaar 2000 wordt weergegeven als 100, 2001 geeft 101 enz. Daarom wordt er, als het jaartal kleiner is dan 1900, 1900 bij het jaartal opgeteld om toch een goed resultaat te kijgen.
De methode getDate() geeft de dag van de maand weer.
de functie ToonTijd haalt de tijd uit het datum-object met behulp van getHours() en getMinutes(). Er wordt een 0 vóór gezet als de tijd voor 10 uur is, en/of de minuten kleiner zijn dat 10.
Vlak voor de aanroep wordt de systeem-datum opgeslagen in een variabele Nu, zoals hiervoor beschreven is.
De drie functies geven elk een string terug. Deze strings worden in de web-pagina geplaatst met behulp van document.write opdrachten.
Elk van deze document.write opdrachten stuurt ook een "<br>" naar de pagina. Daardoor wordt de volgende string een regel lager gezet.
Je zet de gegevens achter elkaar in plaats van onder elkaar door in de aanroep van document.write de string "<br>" te vervangen door een gewone spatie " " of door " ".

Gebruik:

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

De code ziet er als volgt uit:

(Zet dit script bij voorkeur in de <HEAD>)

<script>
// Bepalen van dag en datum
// (c) Ben Boukes, 2000
// Mag vrij worden gebruikt

maanden = new Array(12)
maanden[0] = "januari"
maanden[1] = "februari"
maanden[2] = "maart"
maanden[3] = "april"
maanden[4] = "mei"
maanden[5] = "juni"
maanden[6] = "juli"
maanden[7] = "augustus"
maanden[8] = "september"
maanden[9] = "oktober"
maanden[10] = "november"
maanden[11] = "december"

dagen = new Array(7)
dagen[0] = "Zondag"
dagen[1] = "Maandag"
dagen[2] = "Dinsdag"
dagen[3] = "Woensdag"
dagen[4] = "Donderdag"
dagen[5] = "Vrijdag"
dagen[6] = "Zaterdag"

function ToonDag(Datum)
{
return dagen[Datum.getDay()];
}

function ToonDatum(Datum)
{
var maand = maanden[Datum.getMonth()];
var jaar = Datum.getYear();
if ( jaar < 1900 ) // Voorkom fouten met jaartal
jaar = jaar + 1900;
return Datum.getDate() + " " + maand + " " + jaar
}

function ToonTijd(Datum)
{
var uren = Datum.getHours();
var mins = Datum.getMinutes();
var tijd = uren;

if (uren < 10)
tijd = "0" + tijd;
if (mins < 10)
tijd += ":0" + mins;
else
tijd += ":" + mins;
return tijd;
}
</script>

(Zet deze code in de <BODY> op de plaats waar je de datum en de tijd wilt hebben)

<script>
// Plaats de datum in de pagina
var Nu = new Date();
document.write(ToonDag(Nu),"<br>");
document.write(ToonDatum(Nu),"<br>");
document.write(ToonTijd(Nu),"<br>");
</script>

Downloaden:

Druk op de knop: File: voorb018.zip, 757 bytes.

Opmerking:

Er zijn veel verschillende manieren om een datum te formatteren. De hier gebruikte methode is er slechts één van.