How to create countdown timer using jquery

Leave a Comment / jquery / By

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:



<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>