Einfacher Countdown mit PHP und JavaScript

Hier zeige ich ein kurzes Beispiel wie man einen Countdown umsetzen kann.
Der Zeitpunkt wann der Countdown abläuft kann dabei aus einer Datenbank gelesen werden oder im Quelltext festgelegt werden.

<?php 
//z.b. Zeitpunkt aus einer Datenbank 
$datetime = "2013-12-31 09:21:28"; 
$ts = strtotime($datetime); //in TimeStamp umwandeln 

$currentTs = time(); //Aktueller Timestamp 
?>
 
<html>
    <head>
        <title>Countdown</title>
        <script type="text/javascript">
            var countdownfunc = function(elem, ende, endstring)
            {
                //Wenn nichts als countdownende angegeben wurde dann wird das hier festgelegt
                if(typeof endstring == 'undefined')
                {
                    endstring = 'jetzt';
                }
 
                //Der ausgabestring wird festgelegt
                var output = endstring;
 
                //Differenz zwischen jetzt und dem ende
                //division durch 1000 weil in JavaScript ein timestamp in Millisekunden angegeben wird
                var timeDiff = (parseInt(ende)) - (parseInt(new Date().getTime() / 1000));
 
                //Wenn mehr als 0 Sekunden übrig ist dann ...
                if(timeDiff > 0)
                {
                    //... setz den ausgabe string zurück
                    output = '';
 
                    //Wenn mehr als 1 Stunde (60 sek * 60 Min) übrig ist...
                    if(timeDiff > 3600)
                    {
                        //errechne wie viele stunden übrig sind
                        output += parseInt(timeDiff/3600) + 'h ';
                        timeDiff = timeDiff%3600; //Modulo, teile durch eine stunde und speichere den rest
                    }
 
                    //Wenn mehr als 1 Minute (60 Sek) übrig ist ...
                    if(timeDiff > 60)
                    {
                        //... errechne wieviele minuten es sind ...
                        output += parseInt(timeDiff/60) + 'm ';
                        timeDiff = timeDiff%60;//... und merk dir den rest
                    }
 
                    //jetzt sind nur noch die sekunden übrig
                    output += timeDiff + 's';
 
                    //rufe diese funktion nach 1000 millisekunden (1 Sek) wieder auf
                    setTimeout(function() {countdownfunc(elem, ende, endstring);},1000);
                }
 
                //Schreib den ausgabestring in das mitgelieferte element
                elem.innerHTML = output;
            };
        </script>
    </head>
 
    <body>
        Restzeit:
<div id="countdown"></div>

 
        <script type="text/javascript">
            //Funktion erst aufrufen nachdem das element erzeugt wurde ...
            countdownfunc(document.getElementById('countdown'), <?=$ts?>);
        </script>
    </body>
</html>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert