Untitled UI logotext
Solutions
WebsitesEcommerceMobile AppsWeb AppsProduction Support & Maintenance
Our work
Company
About usBlogPodcastContact us
Book a free consultation

How do I develop a countdown timer?

Olivia Rhye

So i'm getting married this year...I know, congratulations. Well, during the development of my wedding website I decided that I wanted to create a countdown timer that would capture the days, hours, minutes, and seconds until my wedding. It's kind of a fun way to add a little flare to your website. The following is the code that I used to do this.

 

// Set the date we're counting down to
// Set the date we're counting down to
var countDownDate = new Date("Oct 6, 2018 17:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

// Get todays date and time
var now = new Date().getTime();

// Find the distance between now an the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
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);

// Display the result in the element with id="demo"
document.getElementById("countdown").innerHTML = " " + days + " " + hours + " " + minutes + " " + seconds + " ";

// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "It's Wedding Time!";
}
}, 1000);

References: w3schools.com

Ready to start a project?

Book a free consultation
Untitled UI logotext
Our work
About us
Blog
Careers
Submit a ticket
Agency Partnerships
Contact
© 2024 fjorge. All rights reserved.
Privacy