CODEWITHSUNDEEP
javascriptphpjquery
KDJ
KDJ

Reputation: 309

Javascript/PHP countdown timer that updates every second and counts down to a specific date and time

So the code below is the code that I was able to work with so far; however, doesn't do exactly what I need it to do.

I want to be able to call a function (aka: sundayDelta() ), however, I would love to be able to define the day of week and time of day I want the function to use in the countdown inside the calling of the function. I'm not sure if this is possible...but I was thinking something like this

sundayDelta(1,1000) which would turn into Day of Week Sunday and time of day: 1000 (10:00am). Not sure if something like this is even possible; however, I'm hoping it is. I plan on having multiple countdowns going on the same page just appearing at different times of day.

When the countdown finishes, I want it to refresh a div (doesn't matter what name the div has)

I would also love to be able to incorporate PHP server time into this that way everyone is seeing the correct countdown no matter where they are.

Any help would be great! Thanks for your input!

function plural(s, i) {
  return i + ' ' + (i > 1 ? s + 's' : s);
}

function sundayDelta(offset) {
  // offset is in hours, so convert to miliseconds
  offset = offset ? offset * 20 * 20 * 1000 : 0;
  var now = new Date(new Date().getTime() + offset);
  var days = 7 - now.getDay() || 7;
  var hours = 10 - now.getHours();
  var minutes =  now.getMinutes() - 00 ;
  var seconds =  now.getSeconds()- 00;
    if (hours < 0){
      days=days-1;
    }
    var positiveHours= -hours>0 ? 24-(-hours) : hours;
  return [plural('day', days),
          plural('hour', positiveHours),
          plural('minute', minutes), 
          plural('second', seconds)].join(' ');
}

// Save reference to the DIV
$refresh = $('#refresh');

$refresh.text('This page will refresh in ' + sundayDelta());

// Update DIV contents every second
setInterval(function() {
  $refresh.text('This page will refresh in ' + sundayDelta());
}, 1000);

Upvotes: 0

Views: 910

Answers (1)

mike.k
mike.k

Reputation: 3457

When I make flexible text for intervals, I like to subtract out until nothing is left. That way you only show the non-0 values:

function sundayDelta(target_date) {
    var now = new Date();
    var offset = Math.floor((Date.parse(target_date) - now.valueOf()) / 1000);

    var r = [];
    if (offset >= 86400) {
         var days = Math.floor(offset / 86400);
         offset -= days * 86400;
         r.push(plural('day', days));
    }
    if (offset >= 3600) {
         var hours = Math.floor(offset / 3600);
         offset -= hours * 3600;
         r.push(plural('hour', hours));
    }
    if (offset >= 60) {
         var minutes = Math.floor(offset / 60);
         offset -= minutes * 60;
         r.push(plural('minute', minutes));
    }
    if (offset != 0) {
         r.push(plural('second', offset));
    }
    return r.join(' ');
}

In the PHP code, you can set variable this way. And we'll leave time zones out of it for now, but they could be added as well just by specifying them.

echo "target_date = '" . date('Y-m-d H:i:s', strotime('next Sunday 10am')) . "';\n";

Upvotes: 1

Related Questions