CODEWITHSUNDEEP
phpjavascriptdatecountdowncountdowntimer
Trooper X
Trooper X

Reputation: 13

PHP Generated date -> Javascript countdown

I'm making a site for an Informatics project of mine. For that I want to make:

  1. php script that outputs a date which is can be stored in a Database.
  2. Javascript counts down to that date. If it's finished I want to display a hyperlink (simple HTML anchor).

Item 1 has already been done, but I am having a difficult time achieving item 2. We only learned HTML, MySQL and PHP so far. So I'm learning Javascript at the moment. All the examples on this site are too difficult to understand and there must be an easier way to do it. I want to understand the code.

PHP (no edit needed):

function Klaar_Bouw($getal=0) {
      $nu = strtotime("now");
      $dag = floor($getal / 86400);
      $uur  = floor(($getal % 86400) / 3600);
      $min = floor(($getal % 3600) / 60);
      $sec = ($getal % 60);
      $nieuw = date('d-m-Y H:i:s', mktime(
      date('H',$nu)+$uur,
      date('i',$nu)+$min,
      date('s',$nu)+$sec,
      date('m',$nu),
      date('d',$nu)+$dag,
      date('Y',$nu))
      );
      return $nieuw;
              }
$bouwklaar = Klaar_Bouw( -! random number in seconds !-);
echo"$bouwklaar";

Javascript:

function Bouwen(BouwKlaar) {
    var bouwtijd = new Date(BouwKlaar);

    var dag = (getUTCDay(bouwtijd) - getUTCDay());
    var uur = (getUTCHours(bouwtijd) - getUTCHours());
    var min = (getUTCMinutes(bouwtijd) - getUTCMinutes());
    var sec = (getUTCSeconds(bouwtijd) - getUTCSeconds());

    return dag + ":" + uur + ":" + min + ":" + sec;
}

setInterval(function () {
    var bouw = Bouwen('2013, 05, 21, 20, 00, 00');
    document.getElementById("datum").innerHTML = bouw;
}, 500);

Output Format: dd:hh:mm:ss (counting down to 0, then output HTML anchor link)

Upvotes: 1

Views: 231

Answers (2)

George
George

Reputation: 357

Take a look at this jsFiddle. Several issues:

  • You are using the new Date function incorrectly. This function receives several integer inputs, not a formatted string.
  • Notice how the days, minutes, hours, and seconds are calculated. You should subtract the dates FIRST, then retrieve results from the getUTC functions.

Upvotes: 0

DontVoteMeDown
DontVoteMeDown

Reputation: 21475

You're misusing the Date object. Try using like this:

function Bouwen(year, month, day, hour, minute, second) {
    var bouwtijd = new Date(year, (month - 1), day, hour, minute, second);

and of course:

var bouw = Bouwen(2013, 5, 21, 20, 0, 0);

You interval doesn't need to run at the frequency of 500 miliseconds if your countdown will be refresh on each second. So use: window.setTimeout('targetFunction()', 1000) for each second. Plus, it will print the same time ever cause you're not changing it. To change it you'll have to set your function to call itself by the interval decreasing by 1 from seconds. But before the call of the interval, you'll have to compare if your current date(of the countdown) is equal another one(that you not specified on your text) to stop it and show your hyperlink.

Good luck.

Upvotes: 2

Related Questions