How to display year in jQuery countdown timer

Question

I have a countdown timer for next 25 years. how can I display years in this timer. currently instead of year days are showing. I need to display the years also. please help . enter image description here

please find the code i have used "code"

enter code here

 let daysItem = document.querySelector("#days");
 let hoursItem = document.querySelector("#hours");
 let minItem = document.querySelector("#min");
 let secItem = document.querySelector("#sec");

 let countDown = () => {
 let futureDate = new Date("17 august 2022 9:59:59");
 let currentDate = new Date();
 let myDate = futureDate - currentDate;
 //console.log(myDate);

 let days = Math.floor(myDate / 1000 / 60 / 60 / 24);

 let hours = Math.floor(myDate / 1000 / 60 / 60) % 24;

 let min = Math.floor(myDate / 1000 / 60) % 60;

 let sec = Math.floor(myDate / 1000) % 60;

 daysItem.innerHTML = days;
 hoursItem.innerHTML = hours;
 minItem.innerHTML = min;
 secItem.innerHTML = sec;
}

countDown()

setInterval(countDown, 1000)

SKJ · Accepted Answer · 2022-08-16 20:34:41Z

1

You need to make calculation with getFullYear() from current date to futur date.

let yearsItem = document.querySelector("#years");
let daysItem = document.querySelector("#days");
let hoursItem = document.querySelector("#hours");
let minItem = document.querySelector("#min");
let secItem = document.querySelector("#sec");

let countDown = () => {
 let futureDate = new Date("17 august 2047 9:59:59");
 let currentDate = new Date();
 let myDate = futureDate - currentDate;
 //console.log(myDate);

 let years = futureDate.getFullYear() - currentDate.getFullYear(); 
 
 let days = Math.floor(myDate / 1000 / 60 / 60 / 24);

 let hours = Math.floor(myDate / 1000 / 60 / 60) % 24;

 let min = Math.floor(myDate / 1000 / 60) % 60;

 let sec = Math.floor(myDate / 1000) % 60;
 
 yearsItem.innerHTML = years;
 daysItem.innerHTML = days;
 hoursItem.innerHTML = hours;
 minItem.innerHTML = min;
 secItem.innerHTML = sec;
}

countDown()

setInterval(countDown, 1000)

div { display:inline-block; padding:5px; background:#000; color:#fff }

Years <div id="years"></div>
Days <div id="days"></div>
Hours <div id="hours"></div>
Min <div id="min"></div>
Sec <div id="sec"></div>

edited Aug 16, 2022 at 20:34

answered Aug 16, 2022 at 20:28

SKJ

2,4371 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sanishma shylendran Over a year ago

Thanks . but here date is wrong. 23 YEARS- 295 DAYS, 10 hours, 10 min, 3 sec like that i need

SKJ Over a year ago

You where asking for years, that's what i did. @sanishmashylendran

SKJ Over a year ago

Note that Stackoverflow is not free coding website. We help if you get stuck in your codes developments.

Collectives™ on Stack Overflow

How to display year in jQuery countdown timer

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related