Basic Example – Counting down to Jan 5th, 2024 15:00:00

This code byte provides a very simple way of producing a dynamic countdown timer to a particular date and time using pure JavaScript. Alternatively, if you’re looking for a count up javascript count-up timer, then head here: Javascript count up from date and time

Step 1: The basic HTML

  <div id="countdown1" class="countdown">
    <span class="timeel days">00</span>
    <span class="timeel timeRefDays">days</span>
    <span class="timeel hours">00</span>
    <span class="timeel timeRefHours">hours</span>
    <span class="timeel minutes">00</span>
    <span class="timeel timeRefMinutes">minutes</span>
    <span class="timeel seconds">00</span>
    <span class="timeel timeRefSeconds">seconds</span>
  </div>

Step 2: The Core Javascript

This is the main JavaScript that gets things going. You can either put this in your JS file that is to be included on every page that requires the countdown (Eg. main.js), or just put it in <script></script> tags on specific pages. Just change the parameters where the countDownToTime function is first called, by adding your desired date, and element to target as the countdown timer.

/*
 * Basic Count Down to Date and Time
 * Author: @guwii / guwii.com
 * https://guwii.com/bytes/easy-countdown-to-date-with-javascript-jquery/
*/
window.onload = function() {
  // Month Day, Year Hour:Minute:Second, id-of-element-container
  countDownToTime("Jan 5, 2024 15:00:00", 'countdown1'); // ****** Change this line!
}
function countDownToTime(countTo, id) {
  countTo = new Date(countTo).getTime();
  var now = new Date(),
      countTo = new Date(countTo),
      timeDifference = (countTo - now);
      
  var secondsInADay = 60 * 60 * 1000 * 24,
      secondsInAHour = 60 * 60 * 1000;

  days = Math.floor(timeDifference / (secondsInADay) * 1);
  hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
  mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
  secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

  var idEl = document.getElementById(id);
  idEl.getElementsByClassName('days')[0].innerHTML = days;
  idEl.getElementsByClassName('hours')[0].innerHTML = hours;
  idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
  idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

  clearTimeout(countDownToTime.interval);
  countDownToTime.interval = setTimeout(function(){ countDownToTime(countTo, id); },1000);
}

Step 3: Style it up

The very basic styling for the top example, I’ve left it simple to ensure it’s
easy for everyone to edit themselves – you can do better I’m sure!

<style>
.countdown {
  text-align: center;
  margin-bottom: 20px;
}
.countdown .timeel {
  display: inline-block;
  padding: 10px;
  background: #151515;
  margin: 0;
  color: white;
  min-width: 2.6rem;
  margin-left: 13px;
  border-radius: 10px 0 0 10px;
}
.countdown span[class*="timeRef"] {
  border-radius: 0 10px 10px 0;
  margin-left: 0;
  background: #e8c152;
  color: black;
}
</style>