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]
<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>
[/html]
My name is Benson Karue, I was Software Engineer Telenet Co LTD before I quit and joined YouTube and Udemy as an instructor. I have real-world software experience and have a Bachelor’s degree in Mathematics and Computer Science with 6+ years of coding experience and winning several competitions and coding challenges.
I am familiar with C, C++, C#, Objective-C, Java, Swift, Android, iOS, Windows mobile, J2ME, Blackberry, HTML5, CSS3, JavaScript, Jquery, AJAX, Node.js, PHP, Ruby, Python, Scala, Groovy, PhoneGap JSP, JSF, EJB, Struts, Hibernate and Spring MVC, Flat Design along with databases such as MySQL, Oracle, SQLServer, SQLite and many other technologies and frameworks