CODEWITHSUNDEEP
javascript
Mike Spider
Mike Spider

Reputation: 227

Javascript Countdown

I'm trying to create a countdown. Basically I have the time a client has placed an order (which is in dateTime format stored in db for eg. "2014-08-14 12:52:09") and I also have the time it takes to complete the order ( which is either in hours and minutes "1" 45", or just minutes "45").

I got a countdown script from the web and I'm having a bad time figuring out how to format both times so that the script understands.

I got this coming from db Order time----> 12:52:09 expiry time ---> 45minutes

expiry time may sometimes including hours as well: eg: expiry time ---> 1hour 45minutes.

the script I got from the web I enclosed inside a function at the moment:

JS:

  function clockTicking(){

 // set the date we're counting down to
   var target_date = new Date("Aug 15, 2019").getTime();

   // variables for time units
   var days, hours, minutes, seconds;

   // get tag element


  // update the tag with id "countdown" every 1 second
   setInterval(function () {

     // find the amount of "seconds" between now and target
     var current_date = new Date().getTime();
     var seconds_left = (target_date - current_date) / 1000;

     // do some time calculations
     days = parseInt(seconds_left / 86400);
     seconds_left = seconds_left % 86400;

     hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

   // format countdown string + set tag value
   $('.countdown').html(days + "d, " + hours + "h, "+ minutes + "m, " + seconds + "s");  

  }, 1000);

}

Any help will be greatly appreciated.

Upvotes: 0

Views: 174

Answers (3)

Johan Karlsson
Johan Karlsson

Reputation: 6476

You can change the beginning of the script to this

function setTimer(hours, minutes, dateTime){

   var date = new Date(dateTime);
   date.setHours(date.getHours() + hours);
   date.setMinutes(date.getMinutes() + minutes);

   var target_date = date.getTime();

   // rest of script
   }

then just call it with setTimer(1,30, "2014 09 24 00:23") to set the count down relative to 2014-09-24 01:53

Check it out here: jsFiddle

Upvotes: 1

loujaybee
loujaybee

Reputation: 96

I'd really consider using:

http://momentjs.com/docs/

If you're doing a fair amount of date time handling.

However, it looks like you're having trouble converting your two time formats to the date time object? 

  var stripNonNumberics = function(string) {
    return Number(string.replace(/\D/g, ''));
  }

  var target_date = "1hour 45minutes"; // or var target_date = "45minutes";
  var split_date = target_date.split(' ');
  var minutes;

  // If it has hours
  if (split_date[1]) {
    minutes = stripNonNumberics(split_date[1]) + (stripNonNumberics(split_date[0]) * 60);
  } else {
    minutes = stripNonNumberics(split_date[0]);
  }

  console.log(new Date(new Date().getTime() + minutes*60000););

Upvotes: 1

fstanis
fstanis

Reputation: 5534

I would like to recommend Moment.js for this (and just about any kind of date/time parsing). While writing your own function might seem tempting, there are often many things that need to be taken into account and it's simply not worth it.

Using Moment.js, what you're trying to achieve can be done like this:

function clockTicking(){

    var target_date = moment('Aug 15, 2019', 'MMM DD, YYYY');
    // update the tag with id "countdown" every 1 second
    setInterval(function () {
        var moment_diff = moment.duration(target_date.diff(moment()));
        // format countdown string + set tag value
        $('.countdown').html(moment_diff.days() + "d, " + moment_diff.hours() + "h, "+ moment_diff.minutes() + "m, " + moment_diff.seconds() + "s");

    }, 1000);

}

Of course, keep in mind that this particular example is not correct because the difference is too large (it will only work if the difference is less than a month), but it shouldn't be a problem since you mentioned in your original post that the difference should usually be measured in hours, not years.

Upvotes: 1

Related Questions