Javascript Balkenuhr

Scripte > Daytime

Diese Balken-Uhr benötigt natürlich ein wenig mehr Platz auf der Homepage, ist dafür aber auch ein Hingucker.

Alle Textelemente und Funktionen können über die Style-Informationen in der Datei "barclock.css" oder auch im HTML-Code selbst der Homepage angepasst werden.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

x runter geladen

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<form id="Obj174">

<table class="Obj174a" cellspacing="0" cellpadding="3">

<tr>

<td class="Obj174c" align="left">Stunden:</td>
<td class="Obj174b"><input class="Obj174d" readonly style="color:#FF7F00" type="text" id="Std"></td>
<td class="Obj174b"><input readonly class="Obj174f" type="text" id="hours" style="color:#FF7F00"></td>

</tr>
<tr>

<td class="Obj174c" align="left">Minuten:</td>
<td class="Obj174b"><input class="Obj174d" readonly style="color:#00C070" type="text" id="Min"></td>
<td class="Obj174b"><input readonly class="Obj174f" type="text" id="minutes" style="color:#00C070"></td>

</tr>
<tr>

<td class="Obj174c" align="left">Sekunden:</td>
<td class="Obj174b"><input class="Obj174d" readonly style="color:#0090E0" type="text" id="Sec"></td>
<td class="Obj174b"><input readonly class="Obj174f" type="text" id="seconds" style="color:#0090E0"></td>

</tr>
<tr>

<td class="Obj174c" align="left">Zeit:</td>
<td align="center" colspan="2">
<input class="Obj174e" readonly type="text" id="Zeit"></td>

</tr>

</table>

</form>

</div>

Nach dem <BODY> Tag

Code Datei "barclock.css"

.Obj174a { border: 2px solid #000; background: #5F5F5F; }

.Obj174b { border: 1px solid #000; padding-left: 3px; padding-right: 3px; vertical-align: middle; }

.Obj174c { color: #E0E0E0; font-size: 12px; vertical-align: middle; padding-left: 2px; border: 1px solid #000;}

input.Obj174d {

background: #E0E0E0;
font-size: 14px;
vertical-align: middle;
text-align: center;
width: 30px;
}

input.Obj174e {

background: #E0E0E0;
color: #AA0000!important;
font-size: 16px!important;
font-weight: bold!important;
text-align: center;
width: 150px;
}

input.Obj174f {

background: #E0E0E0;
font-size: 12px;
font-weight: bold;
border: none;
text-align: left;
width: 410px;
}

Code Datei "barclock.js"

function Obj174() {

var ZeitJetzt = new Date();
var units = ("|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||");
var StundenJetzt = ZeitJetzt.getHours();
var MinutenJetzt = ZeitJetzt.getMinutes();
var SekundenJetzt = ZeitJetzt.getSeconds();
document.getElementById("hours").value = units.substr(0, StundenJetzt);
document.getElementById("minutes").value = units.substr(0, MinutenJetzt);
document.getElementById("seconds").value = units.substr(0, SekundenJetzt);
// einstellige Werte erweitern
if (StundenJetzt < 10)

StundenJetzt = "0" + StundenJetzt;

if (MinutenJetzt < 10)

MinutenJetzt = "0" + MinutenJetzt;

if (SekundenJetzt < 10)

SekundenJetzt = "0" + SekundenJetzt;

document.getElementById("Std").value = StundenJetzt;
document.getElementById("Min").value = MinutenJetzt;
document.getElementById("Sec").value = SekundenJetzt;
document.getElementById("Zeit").value = StundenJetzt + ":" + MinutenJetzt + ":" + SekundenJetzt + " Uhr";
window.setTimeout("Obj174()", 1000);

}
window.setTimeout("Obj174()", 2000);

» nach oben «

Stunden:
Minuten:
Sekunden:
Zeit: