Tutorial HTML, CSS u. PHP - Forum

[Kazu]

Hallo Leute,

ich suche einen Countdown Timer für eine Webseite. Da sollte ich Tage, Stunden, Minuten und Sekunden haben und bestimmen wie lange der Coundown dauert. Finde im Netz zwar einige sachen aber die funktionieren entweder nicht oder sind zu kompliziert für mich zum einbinden. Hat jemand eventuell einen den ich auch leicht stylen kann?

[DerWaldschrat]

Versuchs mal damit:

Code: Alles auswählen

/*
     * Erzeugt einen Counter, der herunterzählt.
     * element: Das HTML-Element, in das der Counter kommt. In dem Element sollte sich kein Inhalt befinden.
     * time: Der UTC-Zeitpunkt in Millisekunden, bis zu dem gezählt werden soll.
     *
     * Beispiel:
     ** Wir haben folgendes HTML: <span id="counter"></span>
     ** Einen Counter, der immer zwei Stunden herunterzählt, erhalten wir, indem wir folgendes in ein Skriptelement, das nach dem Span steht, schreiben:
     ** Counter(document.getElementById("counter"), (new Date()).getTime() + 3600 * 2 * 1000);
     **
     * */
    var Counter = function (element, time) {
        var to = time,
        interval = null,
        // Gibt einen Zeitstempel zurück, der days, hours, minutes und seconds enthält:
        milliToReadable = function(milli) {
            var DAY = 86400000,
            HOUR = 3600000,
            MINUTE = 60000,
            SECOND = 1000,
            ret = {};
            ret.days = Math.floor(milli / DAY);
            milli = milli % DAY;
            ret.hours = Math.floor(milli / HOUR);
            milli = milli % HOUR;
            ret.minutes = Math.floor(milli / MINUTE);
            milli = milli % MINUTE;
            ret.seconds = Math.floor(milli / SECOND);
            return ret;
        },
        // Wiederholt eine Zeichenkette input so oft, wie multiplier anzeigt
        strRepeat = function (input, multiplier) {
                return new Array(multiplier + 1).join(input);
        },
        // Setzt führende Nullen zu der Zahl num, wenn ihre Zeichenkettenlänge kleiner l ist
        zeros = function (num, l) {
            var len = l || 2, str = num.toString();
            if (str.length < len) {
                return strRepeat("0", len - str.length) + str;
            }
            return str;
        },
        // Diese Funktion wird alle Sekunde aufgerufen
        fun = function () {
            var from = new Date().getTime();
            // Ist der Timer abgelaufen?
            if (from >= to) {
                element.innerHTML = "Ende!";
                window.clearInterval(interval);
            // Ansonsten Anzeige aktualisieren
            } else {
                var time = milliToReadable(to - from);
                element.innerHTML = time.days != 0 ? (time.days + " Tage, ") : ""
                + zeros(time.hours) + ":"
                + zeros(time.minutes) + ":"
                + zeros(time.seconds) + " Stunden";
            }
        };
        // Einmaliger, sofortiger Aufruf
        fun();
        // Intervall setzten
        interval = window.setInterval(fun, 1000);
    };


[Sarkkan]

Sehr schön Waldschrat, dass du auch erklärst, wie man dein Skript nutzt
Für jemanden, der es nicht schafft einen Countdown von einer Seite ein zu binden, weil er/sie sehr wahrscheinlich keinen Plan von JavaScript hat, ist dass sehr Hilfreich