Javascript Balkenuhr - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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
Downloads:
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);
Feedbacks zu ""

Keine Kommentare gefunden.

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.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 2 Online
            » 20 Heute
            » 165 Gestern
            » 508 Woche
            » 2716 Monat
            » 49677 Jahr
            » 273883 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt