setinterval jquery Example

In this post we will give you information about Jquery countdown timer with setInterval – source code. Hear we will give you detail about Jquery countdown timer with setInterval – onlinecodeAnd how to use it also give you demo for it if it is necessary.

Jquery countdown timer with setInterval

Today, we will discuss about how to create a jQuery countdown timer with setInterval. why we use this timer? Generally, when we have given quiz exam at that time we use this timer, and that exam is arranged fix time.

Now, we will use the setInterval and getTime function in here below example. the setinterval function will call each 1 second and it will Update the count down every 1 second. The get getTime function will sets today date and time or Vuejs settimeout components Example.

Read Also:  AngularJS Fancybox Popup Simple Example

Create a countdown timer using setInterval

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jquery countdown timer with setInterval - www.pakainfo.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div >
  <div >
	<div >
		<span  style="font-size:50px; text-align:center;"></span>
	</div>
  </div>
   <br/>
   <div >
	<div >
		  <span id="demo"></span>
	</div>
  </div>
</div>
<script>
var timeout =1;
var countDownDate = new Date();
countDownDate.setMinutes(countDownDate.getMinutes()+timeout);
var timestamp = countDownDate.getTime();

if(localStorage.getItem("timestamp")==null)
{
	//store current time into local storage
    localStorage.setItem("timestamp",timestamp);
}


  var x = setInterval(function() {

  var now = new Date().getTime();
  // Find the distance between current time and store time
  var distance = localStorage.getItem("timestamp") - 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);
    
  document.getElementById("demo").innerHTML = "<span class='btn btn-primary'> "+days + " Day </span> <span class='btn btn-success'>" + hours + " Hour </span> <span class='btn btn-info'>"
  + minutes + " Minute </span> <span class='btn btn-danger'>" + seconds + " Second </span>";
   //check conditon of distance 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "<h2 class='label label-danger' style='font-size:25px;'>EXPIRED</h2>";
  }
}, 1000);
</script>
</body>
</html>

In this example, We have already set 1 minute in timeout. whenever you run this example in a browser at that time we store the current timestamp in local storage. we will Find the distance between a current time and stored time. when we will get distance less than zero then it will be displayed expired message.

Read Also:  Laravel 6 display flash message on view

I hope you like this article. So you can like, share and comment on this article.

Please follow and like us:

Hope this code and post will helped you for implement Jquery countdown timer with setInterval – pakainfo. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section.

Read Also:  PayPal Subscriptions(recurring payments) Payment Gateway Integration in PHP Source Code Download

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Remove Last Comma string in javascript
  2. Read Also:  Move Background Image on Mouseover Using jQuery
  3. Read Also:  GridView Tutorial With Examples In jQuery
  4. Read Also:  List of JavaScript Objects and Functions with Example
  5. Read Also:  jQuery Ajax Login Script using PHP MySQLi
  6. Read Also:  jQuery Slide Effect toggle Direction - slideToggle Animation
  7. Read Also:  Responsive Angularjs Image Gallery
  8. Read Also:  jQuery Ajax Login Script using PHP MySQLi
  9. Read Also:  Move Background Image on Mouseover Using jQuery
  10. Read Also:  Remove Last Comma string in javascript
CLOSEX