Hello everyone, today’s tutorial will be on how to create countdown timer using jquery and HTML only. You might have come across some websites, which start countdown timing before redirecting to a given page such as download page. The same concept used on those websites is the same concept we are going to apply here. In case you need any clarification, feel free to ask me in the commenting system below.
How to create countdown timer using jquery
Creating countdown timer involves nothing more complicated than the concept shown by the code below.
You may also like:
- Blogging niches and topics that will never fail you
- Can’t Find Adsense Verification Code in the Adsense Home Page
- android 8.0 features
<html>
<head>
<title>Timer in Jquery</title>
<script src="jquery.js"></script>
<script>
$(function(){
var time = 7;
function redirect(){
var id = setTimeout(redirect, 1000);// function will fired for every one second
$(".timer").html(time);
if(time == 0){
// if time is zero redirect
clearTimeout(id);
window.location.href="https://www.google.com";
}
time --; // the the time decrease, from 7 to 0
}
// remember to call function redirect
redirect();
});
</script>
</head>
<body>
<center><h1>Redirecting to google <span class='timer'>0</span> Seconds</h1></center>
</body>
</html>