Javascript Balkenuhr - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Javascript Balkenuhr

Scripte > Daytime

Javascript Balkenuhr

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.
Download Button
x runter geladen
Stunden:
Minuten:
Sekunden:
Zeit:
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj174_0/barclock.css" />
<script src="wsX5Obj/Obj174_0/barclock.js"></script>
Code für den <BODY> Bereich
<div align="center">
<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>
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 «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt