Learn Tutorials Point - LTP > WordPress > 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>
Author: Learn Tutorials Point
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.
Trending Posts
Tags
ACF
Ading custom columns
admin
Bootstrap
Cart Price
categories
Change Price
class
Code
comments
Create
Creating custom post Type
CSS
current
custom
Customizing
Custom Post
Custom Post Type
Custom Taxonomy
database
Date
Fatch
form
function
HTML
Image
Install
javascript
jQuery
Menu
PHP
Post
Post Type
Price
product
responsive
Resular price
Single product
Table
taxonomy
Theme
Title
woocommerce
Wordpress
Wordpress Code
This post content is good.
Thank you, but I have find out the idea by myself but it’s similar to yours.
Thank you for all the help (: