Balkenuhr - Website X5 Hilfe - Die Helpsite

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

Balkenuhr

Scripte > Attachment

Javascript Balkenuhr

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

Alle Textelemente und Funktionen können über die Style-Informationen der Homepage oder im HTML-Code angepasst werden, wie Textgröße, -farbe und -form.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken.
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 jeweils 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
<style type="text/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;
font-size: 16px;
font-weight: bold;
text-align: center;
width: 150px;
}
input.Obj174f {
background: #E0E0E0;
font-size: 12px;
font-weight: bold;
border: none;
text-align: left;
width: 410px;
}
</style>

<script language="JavaScript" type="text/javascript">
<!-- Beginn Balkenuhr
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);
//  Ende Balkenuhr -->
</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>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 139 Heute
» 182 Gestern
» 834 Woche
» 3154 Monat
» 126524 Jahr
» 454280 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt