Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Making countdown after adding days to today JS

Posted by: hid Feb 13 2020, 09:59 AM

I am making a countdown like this:

CODE

  Date.prototype.addDays = function(d){
    return new Date(this.valueOf()+864E5*d);
  };

  // get cd date
  var cdDate = new Date().addDays(5);

  var cd = setInterval(function(){
    // Get time now
    var now = Date.now();

    // Get distance between now and cdDate
    var distance = cdDate - now;

    // Get time left
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Update UI
    ui_days.firstElementChild.textContent = days;
    ui_hours.firstElementChild.textContent = hours;
    ui_minutes.firstElementChild.textContent = minutes;
    ui_second.firstElementChild.textContent = seconds;
  }, 1000);


I'm confused on why whenever the page is loaded/refreshed the counter starts at 5 days when it should be somewhere around 4 days and ~10 hours.

I believe it has something to do with when I declare the variable cdDate, because when I make it statically without using .addDays it seems to work:

CODE
  var cdDate = new Date(2020, 6, 5, 5, 55, 25, 552);


How can I fix this so I can use .addDays and have the timer work properly?

Posted by: Christian J Feb 13 2020, 12:30 PM

QUOTE(hid @ Feb 13 2020, 03:59 PM) *

I'm confused on why whenever the page is loaded/refreshed the counter starts at 5 days

I don't understand prototype syntax, but this part:

CODE
var cdDate = new Date().addDays(5);

appears to send 5 (for five days I assume?) as a function call argument. Would you rather have it send 4 days 10 hours?

Apparently "864E5" means https://stackoverflow.com/questions/18359401/javascript-date-gettime-code-snippet-with-mysterious-additional-characters/18359426#18359426, so 864E5*d becomes five full days worth of milliseconds.

QUOTE
when it should be somewhere around 4 days and ~10 hours.

Why? unsure.gif (Keep in mind the javascript is reset everytime the page is loaded unless you e.g. set a cookie.)

Posted by: hid Feb 13 2020, 11:36 PM

QUOTE(Christian J @ Feb 13 2020, 12:30 PM) *

QUOTE(hid @ Feb 13 2020, 03:59 PM) *

I'm confused on why whenever the page is loaded/refreshed the counter starts at 5 days

I don't understand prototype syntax, but this part:

CODE
var cdDate = new Date().addDays(5);

appears to send 5 (for five days I assume?) as a function call argument. Would you rather have it send 4 days 10 hours?

Apparently "864E5" means https://stackoverflow.com/questions/18359401/javascript-date-gettime-code-snippet-with-mysterious-additional-characters/18359426#18359426, so 864E5*d becomes five full days worth of milliseconds.

QUOTE
when it should be somewhere around 4 days and ~10 hours.

Why? unsure.gif (Keep in mind the javascript is reset everytime the page is loaded unless you e.g. set a cookie.)


Ok, I was going to respond with an example to try to explain what I wanted and just figured out why it wasn't working.

The cdDate was being set to +5 days, but with the same hours as the day today and so the counter would always start at exactly 5 days instead of more around 4 days and ~19 hours since it is 04:00 in the morning already.

I fixed this by doing this:

CODE

  var cdDate = new Date().addDays(5);
  var cdDate = new Date(cdDate.getFullYear(), cdDate.getMonth(), cdDate.getDate(),
  0, 0, 0, 0);


Thanks for your response and sorry I wansn't the best at explaining my issue.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)