Datum & Uhrzeit

Scripte > Daytime

Datum und Uhrzeit mit Javascript oder PHP

Eine kleine Skriptsammlung für die Ausgabe von Datum und Uhrzeit bzw. in Kombination in verschiedenen Skriptsprachen (PHP und JavaScript). Alle hier gezeigten Funktionen sind nur teilweise formatiert. Es gibt verschiedene Möglichkeiten der Gestaltung in Farbe und Form mit CSS. Die entsprechenden Formatierungen zur Anpassung an die Homepage erfolgen meist im HTML-Code selbst. Erfahrene Nutzer können sämtliche Javascript- und CSS-Code in ein separate Dateien auslagern und im Head-Bereich einbinden:

Einige Funktionen benötigen zwingend einen Startcode im Body-Tag <body onload"...">.

HTML-Code einfach kopieren und an gewünschter Stelle im Body-Bereich <body>.....</body> einfügen.

Bitte beachten:

Dateien, in denen ein PHP-Code ausgeführt wird, müssen zur Ausführung der Funktion die Dateiendung .php aufweisen.

Kalender mit Hintergrund-Bildatei:
(PHP)

Wednesday

zum Skript:

Monatsanzeige:
(Javascript)

im Jahre

zum Skript:

Einfache Datumsausgabe:
(Javascript)

Code für den <BODY> Bereich

<script>

document.write(

new Date()
.getDate()+"."+(new Date()
.getMonth()+1)+"."+new Date()
.getFullYear()

)

</script>

</div>

Nach dem <BODY> Tag

Datumsausgabe mit Wochentag:
(Javascript)

Code für den <BODY> Bereich

<script>

var W = new Array('So','Mo','Di','Mi','Do','Fr','Sa','So'),
H=new Date(),
E=new Array(

"Januar","Februar","März","April","Mai","Juni","Juli",
"August","September","Oktober","November","Dezember"
);
document.write(

W[H.getDay()]
+"., "+H.getDate()
+". "+E[H.getMonth()]
+" "+H.getFullYear()

)

</script>

</div>

Nach dem <BODY> Tag

Datum im Textarea:
(Javascript)

Code für den <BODY> Tag

onLoad="Obj78_2();"

Wer nicht mit Website X5 arbeitet:

Innerhalb des <BODY> Tag

Code für den <BODY> Bereich

<div>

<script>
function Obj78_2() {
var Heute = new Date();
var Tag = Heute.getDate();
var Monat = Heute.getMonth()+1;
var Jahr = Heute.getFullYear();
document.Obj78_2a.Obj78_2b.value= Tag + "." + Monat + "." + Jahr;
}
</script>

<form name="Obj78_2a">

<input type="text" name="Obj78_2b" size="7"

style="color: #000; font-size: 14px; text-align: center;">

</form>

</div>

Nach dem <BODY> Tag

Datum im Textarea mit Button:
(Javascript)

Code für den <BODY> Bereich

<div>

<script>

function Obj78_3() {

var Heute = new Date();
var Tag = Heute.getDate();
var Monat = Heute.getMonth()+1;
var Jahr = Heute.getFullYear();
document.Obj78_3a.Obj78_3b.value= Tag + "." + Monat + "." + Jahr;

}

</script>
<form name="Obj78_3a">

<input type="text" name="Obj78_3b" size="7"
style="color:#000; font-size:14px;">
<input type="button" value="Zeige Datum" onClick="Obj78_3()"
style="color:#000; font-size:14px;">

</form>

</div>

Nach dem <BODY> Tag

Datumausgabe im PopUp-Fenster:
(PHP)

Code für den <BODY> Bereich

<div>

<input type="button" value="Datum jetzt anzeigen"
style="color: #000; font-size: 14px; text-align: center;"
onClick="alert('<?php echo date("d.m.Y"); ?>')" >

</div>

Nach dem <BODY> Tag

Einfache Datumsausgabe:
(PHP)

08.04.2020

Code für den <BODY> Bereich

<?php $datum = date("d.m.Y"); echo $datum; ?>

</div>

Nach dem <BODY> Tag

Datum mit Uhrzeit:
(Javascript)

Code für den <BODY> Bereich

<script>

var d=new Date();
document.write(d.toLocaleString());

</script>

</div>

Nach dem <BODY> Tag

Einfache farbige Uhrzeit:
(Javascript)

00:00:00

Code für den <BODY> Bereich

<p style="color: #000; font-size: 14px; font-weight: bold;

width: 100px; background-color: yellow; text-align:center;"
id="Timer">00:00:00

</p>
<script>

window.setTimeout("Obj78_4()", 0); // Sofort starten
window.setInterval("Obj78_4()", 60); // Aktualisierung jede Sekunde
function Obj78_4() {

document.getElementById("Timer").firstChild.nodeValue =
new Date().toTimeString().substring(0, 8);

}

</script>

</div>

Nach dem <BODY> Tag

Uhrzeit im Textarea:
(Javascript)

Code für den <BODY> Bereich

<div>

<script>

function Obj78_5() {

var Heute = new Date();
var Stunde = Heute.getHours();
var Minute = Heute.getMinutes();
var Sekunde = Heute.getSeconds();
document.Obj78_5a.Obj78_5b.value= Stunde + ":" + Minute + ":" + Sekunde;
window.setTimeout('Obj78_5()',1000);

}

</script>
<form name="Obj78_5a">

<input type=text name="Obj78_5b" size="7"
style="color: #000; font-size: 14px; text-align: center;">

</form>

</div>

Nach dem <BODY> Tag

Uhrzeit im Textarea mit Button:
(Javascript)

Code für den <BODY> Bereich

<div>

<script>

function Obj78_6() {

var Heute = new Date();
var Stunde = Heute.getHours();
var Minute = Heute.getMinutes();
var Sekunde = Heute.getSeconds();
document.Obj78_6a.Obj78_6b.value= Stunde + ":" + Minute + ":" + Sekunde;
window.setTimeout('Obj78_6()',1000);

}

</script>
<form name="Obj78_6a">

<input type="text" name="Obj78_6b" size="7"
style="color: #000; font-size: 14px; text-align: center;">
<input type="button" value="Zeige Uhrzeit" onClick="Obj78_6()"
style="color:#000; font-size:14px;">

</form>

</div>

Nach dem <BODY> Tag

Einfache Uhrzeitausgabe:
(PHP)

21:18 Uhr

Code für den <BODY> Bereich

<?php $uhrzeit = date("H:i"); echo $uhrzeit," Uhr"; ?>

</div>

Nach dem <BODY> Tag

Datum- und Uhrzeitausgabe:
(Javascript)

Code für den <BODY> Tag

onLoad="Obj78_7();"

Wer nicht mit Website X5 arbeitet:

Innerhalb des <BODY> Tag

Code für den <BODY> Bereich

<div>

<script>

function Obj78_7() {

zeit=new Date();
document.Obj78_7a.Obj78_7b.value=zeit.toLocaleString();
window.setTimeout("Obj78_7();",800);

}

</script>
<form name="Obj78_7a">

<input type="text" name="Obj78_7b" value="" size="15"
style="color: #000; font-size: 14px; text-align: center;">

</form>

</div>

Nach dem <BODY> Tag

Textarea mit Button:
(Javascript)

Code für den <BODY> Bereich

<div>

<script>

function Obj78_8() {

zeit=new Date();

document.Obj78_8a.Obj78_8b.value=zeit.toLocaleString();

window.setTimeout("Obj78_8();",800);

}

</script>
<form name="Obj78_8a">

<input type="text" name="Obj78_8b" value="Guten Tag ..." size="15"
style="color: #000; font-size: 14px; padding-left: 2px;">
<input type="button" value="zeige" onClick="Obj78_8()"
style="color: #000; font-size: 14px;">

</form>

</div>

Nach dem <BODY> Tag

Einfache Datum/Uhrzeitausgabe:
(PHP)

08.04.2020 - 21:18 Uhr

Code für den <BODY> Bereich

<?php

$datum = date("d.m.Y"); $uhrzeit = date("H:i");

echo $datum," - ",$uhrzeit," Uhr";

?>

</div>

Nach dem <BODY> Tag

Anzeige im amerikanischen Format:
(PHP)

April 8, 2020, 9:18 pm

Code für den <BODY> Bereich

<?php

$heute = date("F j, Y, g:i a"); echo $heute;

?>

</div>

Nach dem <BODY> Tag

Einfache Uhrzeit im Flash-Format:
(Flash)

Code für den <BODY> Bereich

<object

classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="80"        // Breite der Uhr
height="40"       // Höhe der Uhr
id="Obj78_9">     
<param name="allowScriptAccess" value="sameDomain" />

<param name="movie" value="folder/wsX5Obj78_uhr.swf?m_Farbe=ffffff" />
<param name="quality" value="high" />
<param name="bgcolor" value="#0000ff" />         
<embed

src="folder/wsX5Obj78_uhr.swf?m_Farbe=ffffff" // Farbe der Uhrzeit
quality="high"
bgcolor="#0000ff" // Hintergrundfarbe

width="80" // Breite der Uhr

height="40" // Höhe der Uhr
name="Obj78_9" // Objekt ID
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"

/>

</object>

Download der Flash-Datei "wsX5Obj78_uhr.swf", Pfade (folder) im Code entsprechen anpassen.

Nach dem <BODY> Tag

Anzeige Kalenderwoche:
(Javascript)

Code für den <BODY> Bereich

<script>

var _alleTage = 0;
var _heute = new Date();
var _Tage = new Array(12);

_Tage[0] = 31;
_Tage[2] = 31;
_Tage[3] = 30;
_Tage[4] = 31;
_Tage[5] = 30;
_Tage[6] = 31;
_Tage[7] = 31;
_Tage[8] = 30;
_Tage[9] = 31;
_Tage[10] = 30;
_Tage[11] = 31;

if (Math.round(_heute.getFullYear()/4) == _heute.getFullYear()/4) {

_Tage[1] = 29

}
else {

_Tage[1] = 28

}
if (_heute.getMonth() == 0) {

_alleTage = _alleTage + _heute.getDate();

}
else {

var curMonth = _heute.getMonth();
for (var count = 1;

count <= curMonth; count++) {
_alleTage = _alleTage + _Tage[count - 1];
}
_alleTage = _alleTage + _heute.getDate();
}

var woche = Math.round(_alleTage/7+1);
document.write("<b>Kalenderwoche:</b> " + woche);

</script>

</div>

Nach dem <BODY> Tag

Weitere Scripte findest Du unter Analog Uhren, Digital Uhren und Mini Kalender.

Feedbacks zu ""

F. Fasser

01.07.2014, 14:14

+0 -0

Und wie kann ich es machen, das ich per Button die Zeit anhalten kann?

Nun weiß ich nicht welches Script?
Normaler Weise: function ... (stop)

Andy Sabortein

19.11.2015, 11:51

+0 -0

Ein sehr hilfsreiches Kalender. Ich habe eine Frage.Seit 30. Oktober 2015 habe ich von meinen Chef eine Aufgabe bekommen. Für unseren mittelgroßen Unternehmen soll ich eine neue Java Script Framework & HTML5 UI Library Tool zu finden. Zur dieser Zeitpunkt habe ich viel über JavaScript-Frameworks gelesen. Die erste Alternative die ich gestern gefunden hatte ist Webix (http://webix.com/). Und hier kommen meine Fragen. Haben Sie schon über Webix gehört? Und wenn ja, wie finden Sie es?

Fabian Gschwenter

20.07.2016, 12:12

+0 -0

Danke für eure super Uhren!!!! Hat mir wirklich sehr geholfen!

Prima, freut mich.

Anderas Kroitzsch

30.01.2017, 10:54

+0 -0

Vielen Dank für diese schöne Zusammenstellung, sehr hilfreich!

Jakob Borda

25.09.2017, 20:36

+0 -0

Bei mir funktioniert die Kalenderwoche leider nicht.

Eventuell hast Du Probleme mit den Zeilenumbrüchen. Javascript ist da sehr pinglig.
Ich habe Dir nochmals auf der Testseite den kompletten Code mit Textformatierungsmöglichkeit eingefügt. Diesen bräuchtest Du nur kopieren und als HTML-Objekt einfügen.
Oder kein Javascript installiert/aktiviert: http://www.x5forum.home-wiekau.de/wsx5obj96.php
Falls noch Fragen, einfach melden (nur E-Mail).

Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Bewertung:

Name:

E-Mail:

Kommentar:

Datei Upload:

Captcha:

Vielen Dank für Dein Feedback.

Bitte Dein Feedback Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen. Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.