TICKTOO Systems | Schöne Dinge. Für das Internet und darüber hinaus.

simpleClock - jQuery Plugin

Pedro Stoehr — 26.07.2012

Wir verfahren ja bei Problemen meistens nach dem Motto: Frag Mutter Google ... und wenn sich im Internet nichts Brauchbares findet, was man adaptieren kann, bau Dir dein Zeug selbst.

Zu diesem Ergebnis bin ich gekommen, nachdem ich mich gestern (zumindest gefühlt) durch den kompletten Bodensatz an Forenbeiträgen, veralteten Plugin-Seiten und Ähnlichem zum Thema "einfach mal die Uhrzeit, den Wochentag und das Datum mit jQuery darstellen" gewühlt hatte.

Hier kommt meine Lösung, um die aktuelle Uhrzeit, den Wochentag und das Datum in ansprechender Form darzustellen:

simpleClock Plugin

(function ($) {

  $.fn.simpleClock = function () {

    // Define weekdays and months
    var weekdays = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]
    var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];

    // getTime - Where the magic happens ...
    function getTime() {
      var date = new Date(),
      hour = date.getHours();
      return {
        day: weekdays[date.getDay()],
        date: date.getDate(),
        month: months[date.getMonth()],
        hour: appendZero(hour),
        minute: appendZero(date.getMinutes()),
        second: appendZero(date.getSeconds())
      };
    }

    // appendZero - If the number is less than 10, add a leading zero. 
    function appendZero(num) {
      if (num < 10) {
        return "0" + num;
      }
      return num;
    }

    // refreshTime - Build the clock.
    function refreshTime() {
      var now = getTime();
      $('#date').html(now.day + ', ' + now.date + '. ' + now.month);
      $('#time').html("" + now.hour + "" + "" + now.minute + "" + "" + now.second + "");
    }

    // Tick tock - Run the clock.
    refreshTime();
    setInterval(refreshTime, 1000);

  };
})(jQuery);

Einbindung & Aufruf

Wie man es von jQuery Plugins gewohnt ist, funktioniert der Aufruf der simpleClock recht einfach:

Beim HTML-Code lege ich Wert darauf, alle Bestandteile (clock, time, hour, minute, second und date) zu jeder Zeit einfach anpassbar bleiben.

Da die spans für hour, minute und second im Plugin definiert werden, sieht die eigentliche Einbindung dann so aus:

Das war dann auch schon. Warum umständlich, wenn es auch einfach geht?

UPDATE: Das Projekt findet sich nun auf GitHub - https://github.com/ticktoo/simpleClock