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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>jquery countdown timer with setInterval - XpertPhp</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 class="container">
<div class="row">
<div class="col-lg-12 text-center">
<span class="glyphicon glyphicon-time" style="font-size:50px; text-align:center;"></span>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-12 text-center">
<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.
I hope you like this article. So you can like, share and comment on this article
Greetings! Very helpful advice on this article! It is the little changes that make the biggest changes. Thanks a lot for sharing!