Seit einiger Zeit beobachte ich ein altes Phänomen und zwar immer mehr Webseiten gibt es, wo eine Uhr irgendwo versteckt ist. Ist noch lustig vor so 10 Jahren war das schon mal ein Trend und jetzt ist er wieder hier.
Da ich jetzt mehrmals gefragt worden bin, wie man denn so eine Uhr einbinden kann in die eigene Webseite – habe ich hier eine kleine Anleitung gemacht. Wie das ganze funktioniert, sieht man im Video und für alle die nicht gerne Videos schauen sondern gerne lesen ist die Erklärung einfach. Packt einfach den CSS und den Javascript Code in die richtige Stelle
Wie immer würde ich mich freuen, wenn ihr meinen Youtube Kanal abonnieren würdet 🙂
Video Anleitung
Quellcode
Wichtig ist dass ihr im Body Tag den OnLoad Befehl auch einbindet und dort wo ihr die Uhr haben wollt – da packt ihr den Clock Container hin
Der HTML Code
1 2 3 | <body onLoad="startTime()"> <div id="clock"></div> </body> |
Der CSS Code
1 2 3 4 5 6 7 8 | #clock {
position: absolute;
top: 50%;
left: 50%;
font-size: 3em;
color: #17d4fe;
letter-spacing: 7px;
} |
Der Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(startTime,500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
} |
So eine digitale Uhr sieht ganz schick aus, keine Frage.
Aber leider verlangsamt sie auch oft die Ladezeit einer Webseite erheblich.
Vielleicht spielt das infolge von immer schnellerem Internet (5G läßt grüßen) bald nicht mehr so eine Rolle, aber jetzt schon noch.
Fußnote:
Schade, daß manche (oder alle?) WordPress-Ausführungen mit mit IDN-Mailadressen immer noch immer noch nicht klarkommen. („Gib eine gültige Mail-Adresse ein“)
Seit 2004, der Einführung von IDN im deutschsprachigen Raum und anderswo ist schon viel Zeit vergangen.
Aber immerhin kommt WordPress inzwischen mit IDN-Domain-Namen klar.
hallo remo, also wenn dieser befehl die ladezeit einer #webseite verlangsam, dann sollte man den hoster wechseln. dann hat er sein geschäft eindeutig nicht im griff. tjo umlaute in domains ist ja auch nur ne schweizer sache und das kann man ruhig ignorieren 🙂 imho