The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Making countdown after adding days to today JS
hid
post Feb 13 2020, 09:59 AM
Post #1





Group: Members
Posts: 2
Joined: 13-February 20
Member No.: 27,166



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 13 2020, 12:30 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



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 the number of milliseconds in a 24 hour day, 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.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hid
post Feb 13 2020, 11:36 PM
Post #3





Group: Members
Posts: 2
Joined: 13-February 20
Member No.: 27,166



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 the number of milliseconds in a 24 hour day, 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 4th June 2020 - 08:51 AM