The following screencast provides the steps to implement JavaScript Countdown Timer from w3schools in Oxygen.

JS code:

// Set the date we're counting down to
var countDownDate = new Date("Nov 23, 2018 00: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 and 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="headline-63-11"
  document.getElementById("headline-63-11").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("headline-63-11").innerHTML = "EXPIRED";
  }
}, 1000);

Update on March 24, 2020: Setting the date and time to come from a custom field – https://wpdevdesign.com/countdown-timer-using-acf-in-oxygen/

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

2 comments on “[Video] JavaScript Countdown Timer in Oxygen”

  1. Thanks for the tutorial. Any idea on how to publish the date from a ACF datepicker though? Thanks and keep up the good work. 🙂

magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: