JavaScript: Countdown-Timer

Zergling-new · 06.01.2008, 17:34

Hallo,
hab gerade ein kleines Skript geschrieben, mit dem man einen oder mehrere Timer gleichzeitig laufen lassen kann. Benötigt wird initial im Element "javascript-timer-init" die aktuelle Zeit (time()), in den durchgehend nummerierten Elementen "javascript-timer-#" die Zeit, auf das der Timer zählen soll (also den Unix-Timestamp des Ereignisses).

Die Countdown-Zeit ergibt dann javascript-timer-# minus javascript-timer-init. Somit kann zusätzlich zum Countdown, der logischerweise sekündlich aktualisiert wird auch die tatsächliche Zielzeit angezeigt werden (momentan noch nicht eingebaut).

Die Ausgabe ist frei über display() steuerbar, momentan auch nur in Sekunden.

Vielleicht hilft es ja dem ein oder anderen als Inspiration.

Code:

<html>
    <head>
        <script type="text/javascript">
            // singleton timer
            var Timer = new function()
            {
                // store all instances here
                this.instances = [];
            
                // init with id, current init time and destination time
                // init time needed to synchronize clock (server-side/client-side)
                this.init = function(id, initTime, destTime)
                {
                    this.instances[id] = {
                        "iv"   : setTimeout("Timer.countdown('" + id + "')", 1000), // set interval did not work properly
                        "rest" : destTime - initTime}; // we are just counting down
                }
                
                this.countdown = function(id)
                {
                    if (this.instances[id].rest > 0) {
                        setTimeout("Timer.countdown('" + id + "')", 1000); // new timeout
                    }
                    this.display(id, this.instances[id].rest); // call display function
                    --this.instances[id].rest; // decrement
                }
                
                this.display = function(id, seconds)
                {
                    // display what ever you like
                    document.getElementById(id).innerHTML = seconds;
                }
            }
        
            function init()
            {
                // look after timer init (needed for time synchronisation)
                if (typeof document.getElementById("javascript-timer-init") != "undefined") {
                    var initTime = document.getElementById("javascript-timer-init").innerHTML;
                    var i = 1, e;
                    // increment "i" index, if not found, stop loop
                    while (document.getElementById("javascript-timer-" + i)) {
                        e = document.getElementById("javascript-timer-" + i);
                        var destTime = e.innerHTML;
                        // init timer with id, init time and destination time
                        Timer.init("javascript-timer-" + i, initTime, destTime);
                        ++i;
                    }
                }
            }
            
            // TODO use a better onload event
            window.onload = init;
        </script>
    </head>
    <body>
        <div id="javascript-timer-init" style="display:none"><?=time()?></div>
        <table border="1">
            <tr>
                <td>Eintrag 1</td>
                <td id="javascript-timer-1"><?=strtotime("tomorrow")?></td>
            </tr>
            <tr>
                <td>Eintrag 2</td>
                <td id="javascript-timer-2"><?=(time() + 4)?></td>
            </tr>
        </table>
    </body>
</html>

Vielleicht kann es ja der ein oder andere gebrauchen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

LinkBacks (?) LinkBack to this Thread: http://www.php.de/tutorials/45310-javascript-countdown-timer.html
Erstellt von	For	Type	Datum
Metacrawler - Die Metasuchmaschine.	This thread	Refback	10.03.2012 15:50
countdown timer - Zapmeta	This thread	Refback	27.10.2010 14:11
countdown timer - Zapmeta	This thread	Refback	14.09.2010 13:01
alles-clery.de	This thread	Refback	07.02.2009 13:44

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
Countdown der....	xenus	HTML, Usability und Barrierefreiheit	0	02.10.2006 10:07
javascript timer zurück	Vigintillionär	HTML, Usability und Barrierefreiheit	2	30.04.2006 11:02
Javascript: Suche ganz simples Countdown Script		HTML, Usability und Barrierefreiheit	2	22.09.2005 09:08
php in ein JavaScript Countdown einbinden!	Boennchen	PHP Tipps 2005	11	26.04.2005 13:41
Wie kann ich den Countdown von der Stautsleiste in den Body		HTML, Usability und Barrierefreiheit	17	25.04.2005 22:04
statt javascript new Date(); lieber mit php date		PHP Tipps 2005	5	27.02.2005 16:55
[Erledigt] JavaScript + PHP (SQL) Countdown		HTML, Usability und Barrierefreiheit	5	23.12.2004 14:01
problem (countdown)		HTML, Usability und Barrierefreiheit	8	07.11.2004 23:08
Der 'Countdown' und das Tutorial...		HTML, Usability und Barrierefreiheit	2	12.09.2004 22:43
Javascript		HTML, Usability und Barrierefreiheit	5	31.08.2004 18:30
[Erledigt] countdown timer		PHP Tipps 2004	1	15.07.2004 15:02
Javascript countdown mal anders - erledigt	Ohrwurm83	HTML, Usability und Barrierefreiheit	4	02.07.2004 23:35
javascript countdown in while scheife	Ohrwurm83	PHP Tipps 2004	1	02.07.2004 16:50
[Erledigt] Countdown		HTML, Usability und Barrierefreiheit	2	27.06.2004 02:32


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten