Countdown (JavaScript)

Using JavaScript to countdown to a date

JavaScript has a function called Date() which can either return todays date (24th September 2018 as I write this) or be used to set a date. August 2019 has an important event for me, so I decided to use JavaScript to create a countdown that counts how many days are left until the 1st August 2019.

Whilst creating the countdown I had a little fun showing off the various methods that can be used with Date()

// geektechstuff
// JavaScript Countdown
// This line uses the new Date function to get today’s date
var dateToday = new Date();
// getDate() can then display the date of the month
var dayOfMonth = dateToday.getDate();
// getMonth() can then display the numerical month of the year
var dateMonth = dateToday.getMonth();
// getFullYear() can then display the year
var dateYear = dateToday.getFullYear();
// Just GeekTechStuff checking the outputs of the above
console.warn(dateToday);
console.warn(dayOfMonth);
console.warn(dateMonth);
console.warn(dateYear);
// Entering the event date to countdown to
// Date is entered as month date, year
// The time can also be entered e.g. August, 1 2019 09:00:00
var dateOfEvent = new Date (‘August 1, 2019’);
console.warn(dateOfEvent);
// Working out the difference between the two dates using subtraction
var differenceBetweenDates = dateOfEvent.getTime() – dateToday.getTime();
// Converting the difference into a human standard of time, in this case days
var days = Math.floor(differenceBetweenDates / (1000 * 60 * 60 * 24));
console.warn(days);
Using JavaScript to countdown to a date
Using JavaScript to countdown to a date

The date set by new Date() is the current date as per the devices system date/time. So if this is run on a device with an incorrect system date/time then it will report back an incorrect countdown figure.

 

Counting Other Intervals

I am counting down the days, however it can also be used to countdown other intervals by altering the formula on the line:

var days = Math.floor(differenceBetweenDates / (1000 * 60 * 60 * 24));

 

For hours:

var hours = Math.floor((differenceBetweenDates % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

For minutes:

var minutes = Math.floor((differenceBetweenDates % (1000 * 60 * 60)) / (1000 * 60));

For seconds:

var seconds = Math.floor((differenceBetweenDates % (1000 * 60)) / 1000);

Updating a Web Page Element

The above could used to update a text countdown on webpage using document elements, e.g.

var countDownUpdate = document.getElementById(‘countDown’);

countDownUpdate.textContent = days+’ left until the big event!’;

This would get the element ID ‘countDown’ and then update it with the number of days left.

2 thoughts on “Countdown (JavaScript)

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.