How to create a countdown timer in WordPress using java script

QuestionsCategory: JavascriptHow to create a countdown timer in WordPress using java script
VR Soft Coder Staff asked 3 months ago

You need to add following javascript code in your wordpress page where you want show the timer. I hope you will understand the code. If you face the issue comment below in this question…


			// Set the date we're counting down to
			var countDownDate = new Date(the_field('drwa_time',$value->product_id)).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);

			  // Display the result in the element with id="demo"
			  document.getElementById("ltproduct_id; ?>").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("ltproduct_id; ?>").innerHTML = "EXPIRED";
			  }
			}, 1000);

1 Answers
Staple answered 1 month ago

<ol>
<li><span><</span><span>script</span><span>></span></li>
<li><span> // Set the date we're counting down to</span></li>
<li><span>var</span><span> countDownDate </span><span>=</span> <span>new</span> <span>Date</span><span>(</span><span>the_field</span><span>(</span><span>'drwa_time'</span><span>,</span><span>$value</span><span>-</span><span>></span><span>product_id</span><span>)</span><span>)</span><span>.</span><span>getTime</span><span>(</span><span>)</span><span>;</span></li>
<li> </li>
<li><span> // Update the count down every 1 second</span></li>
<li><span>var</span><span> x </span><span>=</span> <span>setInterval</span><span>(</span><span>function</span><span>(</span><span>)</span> <span>{</span></li>
<li> </li>
<li><span> // Get today's date and time</span></li>
<li><span>var</span><span> now </span><span>=</span> <span>new</span> <span>Date</span><span>(</span><span>)</span><span>.</span><span>getTime</span><span>(</span><span>)</span><span>;</span></li>
<li> </li>
<li><span> // Find the distance between now and the count down date</span></li>
<li><span>var</span><span> distance </span><span>=</span><span> countDownDate </span><span>-</span><span> now;</span></li>
<li> </li>
<li><span> // Time calculations for days, hours, minutes and seconds</span></li>
<li><span>var</span><span> days </span><span>=</span><span> Math.</span><span>floor</span><span>(</span><span>distance / </span><span>(</span><span>1000</span><span> * </span><span>60</span><span> * </span><span>60</span><span> * </span><span>24</span><span>)</span><span>)</span><span>;</span></li>
<li><span>var</span><span> hours </span><span>=</span><span> Math.</span><span>floor</span><span>(</span><span>(</span><span>distance % </span><span>(</span><span>1000</span><span> * </span><span>60</span><span> * </span><span>60</span><span> * </span><span>24</span><span>)</span><span>)</span><span> / </span><span>(</span><span>1000</span><span> * </span><span>60</span><span> * </span><span>60</span><span>)</span><span>)</span><span>;</span></li>
<li><span>var</span><span> minutes </span><span>=</span><span> Math.</span><span>floor</span><span>(</span><span>(</span><span>distance % </span><span>(</span><span>1000</span><span> * </span><span>60</span><span> * </span><span>60</span><span>)</span><span>)</span><span> / </span><span>(</span><span>1000</span><span> * </span><span>60</span><span>)</span><span>)</span><span>;</span></li>
<li><span>var</span><span> seconds </span><span>=</span><span> Math.</span><span>floor</span><span>(</span><span>(</span><span>distance % </span><span>(</span><span>1000</span><span> * </span><span>60</span><span>)</span><span>)</span><span> / </span><span>1000</span><span>)</span><span>;</span></li>
<li> </li>
<li><span> // Display the result in the element with id="demo"</span></li>
<li><span> document.</span><span>getElementById</span><span>(</span><span>"lt<?php echo $value->product_id; ?>"</span><span>)</span><span>.innerHTML </span><span>=</span><span> days </span><span>+</span> <span>"d "</span> <span>+</span><span> hours </span><span>+</span> <span>"h "</span></li>
<li><span>+</span><span> minutes </span><span>+</span> <span>"m "</span> <span>+</span><span> seconds </span><span>+</span> <span>"s "</span><span>;</span></li>
<li> </li>
<li><span> // If the count down is finished, write some text</span></li>
<li><span>if</span> <span>(</span><span>distance </span><span><</span> <span>0</span><span>)</span> <span>{</span></li>
<li><span>clearInterval</span><span>(</span><span>x</span><span>)</span><span>;</span></li>
<li><span> document.</span><span>getElementById</span><span>(</span><span>"lt<?php echo $value->product_id; ?>"</span><span>)</span><span>.innerHTML </span><span>=</span> <span>"EXPIRED"</span><span>;</span></li>
<li><span>}</span></li>
<li><span>}</span><span>, </span><span>1000</span><span>)</span><span>;</span></li>
<li><span><</span><span>/script</span><span>></span></li>
</ol>

Your Answer

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top