JavaScript Custom Countdown Timer For Advanced Custom Fields plugin in WordPress

JavaScript-Custom-Countdown-Timer-For-Advanced-Custom-Fields-plugin-in-wordpress

This code is used for the Advanced Custom Fields date to convert to Countdown Timer.

<h1 id="DateTimeInfo"></h1> 
 <script>
 var event_date = '<?php the_field("event_date_time"); ?> UTC-0';
 
 //console.log(event_date);
  
 // Set the date we're counting down to
 var countDownDate = new Date(event_date).getTime(); 
 
 // Update the count down every 1 second
 var x = setInterval(function() {

   // Get today's 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);
 
   // Output the result in an element with id="DateTimeInfo"
   document.getElementById("DateTimeInfo").innerHTML = days + " Day, " + hours + " Hours, "
   + minutes + " Minutes, " + seconds + " Seconds ";
 
   // If the count down is over, write some text 
   if (distance < 0) {
 clearInterval(x);
 document.getElementById("DateTimeInfo").innerHTML = "";  
   }
 }, 1000);
 </script>



We Well organized and easy-to-understand Interactive tutorials With lots of examples of how to use Tutorials WordPress, PHP, Bootstrap, Bootstrap 4, HTML, CSS, AJAX, jQuery, Woocommerce, Post, Database, Javascript, Theme, Responsive, Templates.
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact us

Fill in the form below or give us a call and we'll contact you. We endeavour to answer all enquiries within 24 hours on business days.