IT-Academy Logo
Sign Up Login Help
Home - Internet - Webdesign - HTML - Die Uhrzeit mit JavaScript und HTML



Die Uhrzeit mit JavaScript und HTML

Wie Sie mit JavaScript eine Uhr in Ihre HTML-Seite einbinden und was Sie alles mit der Uhrzeit machen können.


Autor: N Z (notzomedia)
Datum: 02-12-2003, 20:13:09
Referenzen: http://selfhtml.teamone.de/
Schwierigkeit: Anfänger
Ansichten: 15336x
Rating: 7.25 (4x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Die Uhrzeit mit JavaScript und HTML

Vielleicht wollten Sie schon immer mit ein paar kleinen Extras auf Ihrer privaten Homepage glänzen? Schauen Sie hier wie Sie ganz einfach die aktuelle Uhrzeit auf ihrer Seite anzeigen lassen, oder auch kleine Spielereien mit der Zeit einbinden können.
Der Internetbrowser des Nutzers greift dabei immer auf die Systemzeit bzw. das Systemdatum zurück!
Kopieren Sie die folgenden Text in der Schreibmaschinen-Schriftart einfach in den Windows-Editor und speichern Sie diesen unter einem Namen mit ".htm"-Endung (jedes Beispiel in eine neue Datei). Diese Dateien können Sie anschließend mit Ihrem Browser öffnen!


<html><head><title>Uhrzeit</title>
<script type="text/javascript">
<!--
function uhrzeit()
{
var zeit = new Date();
var Uhrzeit;

if(zeit.getHours() < 10) {Uhrzeit="0" + zeit.getHours() + ":";}
else {Uhrzeit=zeit.getHours() + ":";}

if(zeit.getMinutes() < 10) {Uhrzeit=Uhrzeit + "0" + zeit.getMinutes() + ":";}
else {Uhrzeit=Uhrzeit + zeit.getMinutes() + ":";}

if(zeit.getSeconds() < 10) {Uhrzeit=Uhrzeit + "0" + zeit.getSeconds();}
else {Uhrzeit=Uhrzeit + zeit.getSeconds();}

alert(Uhrzeit);
}

//-->
</script>
</head><body>
<a href="javascript:uhrzeit()">Die aktuelle Systemzeit melden...<a>
</body></html>


Über den Link "Die aktuelle Systemzeit melden..." wird die JavaScript-Funktion "uhrzeit" aufgerufen. Zuerst wird mit

var zeit = new Date();

ein Datums- und Uhrzeit-Objekt für die nachfolgenden Abfragen angelegt. Mit

zeit.getHours()

wird z.B. die aktuelle Anzahl der Stunden abgefragt, anschließend wird geprüft ob diese größer als 10 ist, falls nicht wird eine Null davor gestellt (aus 9 wird 09), außerdem wird ein ":" angehängt.
Am Ende der Funktion wird die zusammengesetzte Uhrzeit durch die Funktion


alert(Uhrzeit);

in einem Nachrichtenfenster angezeigt. Man könnte die Systemzeit auch in einem Textfeld anzeigen, wo sie einmal pro Sekunde aktualisiert wird:

<html><head><title>Uhrzeit</title>
<script type="text/javascript">
<!--
function uhrzeit()
{
var zeit = new Date();
var Uhrzeit;

if(zeit.getHours() < 10) {Uhrzeit="0" + zeit.getHours() + ":";}
else {Uhrzeit=zeit.getHours() + ":";}

if(zeit.getMinutes() < 10) {Uhrzeit=Uhrzeit + "0" + zeit.getMinutes() + ":";}
else {Uhrzeit=Uhrzeit + zeit.getMinutes() + ":";}

if(zeit.getSeconds() < 10) {Uhrzeit=Uhrzeit + "0" + zeit.getSeconds();}
else {Uhrzeit=Uhrzeit + zeit.getSeconds();}

document.systemzeit.zeit.value=Uhrzeit;
window.setTimeout("uhrzeit()",1000);
}
//-->
</script>
</head><body onLoad="uhrzeit()">
<Form name="systemzeit">
<input type="text" name="zeit" size="6" readonly="true">
</Form>
</body></html>


Die Uhrzeit wird auf die gleiche Weise wie vorher zusammengesetzt, diesmal wird sie aber in ein Textfeld auf der HTML-Seite geschrieben. Durch

window.setTimeout("uhrzeit()",1000);

wird ein Timeout gesetzt, d.h. nach 1000 Millisekunden wird die Funktion "uhrzeit" wieder aufgerufen. Dies ist nötig um die Uhrzeit immer aktuell zu halten.

Die folgende Seite zeigt die Aufenthaltsdauer auf Ihrer Seite in einem Textfeld an:

<html><head><title>Uhrzeit</title>
<script type="text/javascript">
<!--
var start_zeit;
function initialize()
{
var zeit = new Date();
start_zeit=zeit.getTime();
update_zeit();
}

function update_zeit()
{
var zeit = new Date();
var aktuelle_zeit;
var vergangene_zeit;
var vzeit;
aktuelle_zeit=zeit.getTime();
vergangene_zeit = (aktuelle_zeit - start_zeit) / 1000;

if (vergangene_zeit>=3600) {
if(vergangene_zeit<36000)
{
vzeit="0" + Math.floor(vergangene_zeit/3600) + ":";
vergangene_zeit=vergangene_zeit-Math.floor(vergangene_zeit/3600)*3600;}
else {vzeit= Math.floor(vergangene_zeit/3600) + ":";
vergangene_zeit=vergangene_zeit-Math.floor(vergangene_zeit/3600)*3600;}
}
else {vzeit= "00:";}
if (vergangene_zeit>=60) {
if(vergangene_zeit<600) {
vzeit= vzeit + "0" + Math.floor(vergangene_zeit/60) + ":";
vergangene_zeit=vergangene_zeit-Math.floor(vergangene_zeit/60)*60;}
else {vzeit= vzeit + Math.floor(vergangene_zeit/60) + ":";
vergangene_zeit=vergangene_zeit-Math.floor(vergangene_zeit/60)*60;} }
else {vzeit= vzeit + "00:";}
if (Math.floor(vergangene_zeit)<10) {vzeit=vzeit + "0" + Math.floor(vergangene_zeit);}
else {vzeit=vzeit + Math.floor(vergangene_zeit);}
document.zeit_auf_dieser_seite.zeit.value=vzeit; window.setTimeout("update_zeit()",1000); }


//-->
</script>
</head><body onLoad="initialize()">
<Form name="zeit_auf_dieser_seite">
<input type="text" name="zeit" size="6" readonly="true">
</Form>
</body></html>


Beim Laden der Seite wird die Funktion "initalize" aufgerufen. Es wird mit

start_zeit=zeit.getTime();

die Anzahl der vergangen Millisekunden seit dem 1. Januar 1970 00:00:00 abgefragt, diese wird in der Variable "start_zeit" gespeichert. Anschließend wird die Funktion "update_zeit" aufgerufen. Diese Funktion ist für das Aktualisieren des Textfeldes verantwortlich. Zuerst wird wieder die Anzahl der vergangen Millisekunden abgefragt, anschließend wird diese vom Startwert ("start_zeit") subtrahiert um die Anzahl der seit dem Laden der Seite vergangenen Millisekunden zu erhalten. Die Millisekunden werden in Stunden, Minuten und Sekunden umgerechnet, die Funktion

Math.floor(1.2)

gibt die nächst kleinere natürliche Zahl zurück, hier 1.
Die errechneten Werte werden mit Doppelpunkten zusammengesetzt und anschließend im Textfeld ausgegeben.


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06246
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1154
Comments: 0