|
Eine super Uhr als drei-Balken-Anzeige.Die Demo braucht ein paar Sec zum bis die Uhrzeit angezeigt wird.
Autor: Abraham I.
zur Demo
<style type="text/css">
<!--
input.balken {
color: #FF0080;
background: #FFFFFF;
border: none;
font-weight:bold;
}
input {
color: #000000;
background: #FFFFFF;
border: none;
}
#rand {
border-collapse: collapse;
}
#rand td, #rand th {
border: 1px solid #ABABCC;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
// Original: Abraham I. (abraham_824@hotmail.com)
// weiterentwickelt: w. jansen web-toolbox.net
<!--gefunden auf http://www.scriptwelt.org -->
function BalkenUhr() {
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;
// ab hier - Script für die Anzeige Zeit ::::::::::::::::::::::
document.getElementById("Zeit").value = StundenJetzt + ":" + MinutenJetzt + ":" + SekundenJetzt + " Uhr";
// bis hier - Script für die Anzeige Zeit ::::::::::::::::::::
// update alle 1000 Millisekunden
window.setTimeout("BalkenUhr()", 1000);
}
// startet die Funktion 2 sec nach Laden der Seite
window.setTimeout("BalkenUhr()", 2000);
//-->
</script>
</head>
<body>
<br><br>
<form id="Balkenuhr">
<table id="rand" cellspacing="0" cellpadding="3" border="0">
<tr>
<td>Stunden:</td>
<td><input readonly style="color:#FF7F00" type="text" id="Std" size="2"></td>
<td><input readonly class="balken" type="text" id="hours" size="40" style="color:#FF7F00"></td>
</tr>
<tr>
<td>Minuten:</td>
<td><input readonly style="color:#00C070" type="text" id="Min" size="2"></td>
<td><input readonly class="balken" type="text" id="minutes" size="40" style="color:#00C070"></td>
</tr>
<tr>
<td>Sekunden:</td>
<td><input readonly style="color:#0090E0" type="text" id="Sec" size="2"></td>
<td><input readonly class="balken" type="text" id="seconds" size="40" style="color:#0090E0"></td>
</tr>
<!--
Tabellenzeile und Formularfeld für die Zeitanzeige - wenn sie diesen Bereich löschen,
löschen sie bitte auch den zuständigen Script-Code (ist gekennzeichnet)
-->
<tr>
<td>Zeit:</td>
<td colspan="2"><input readonly type="text" id="Zeit" size="40"></td>
</tr>
</table>
</form>
<br>
</body> |