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;
}