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>