Updated April 10, 2023
Introduction to jQuery Timer
jQuery Timer is a very useful feature provided by jQuery to add some extra effects to the animations you create to make your web pages more interactive and attractive. This is achieved by two functions, setTimeout() and setInterval() which delay the execution of a function until a certain period of time. We can create many effects with this timer feature such as Countdown timer, Stopwatch, Image Slider, etc. There are several jQuery plugins available as well which helps in creating these timer effects.
Syntax
For setInterval() Method
setInterval(function, milliseconds, param1, param2….)For setTimeout() Method
setTimeout(function[, delay, param1, param2….]);Examples to Implement jQuery Timer
Below are some examples are mentioned:
Example #1
The following example illustrates how this feature can be used to create a Stopwatch with Start, Stop, and Reset controls:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery timer example</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
var hours = 0;
var mins = 0;
var seconds = 0;
$("#startbtn").click(function () {
startTimer();
});
$("#stopbtn").click(function () {
clearTimeout(timex);
});
$("#resetbtn").click(function () {
hours = 0;
mins = 0;
seconds = 0;
$("#hours", "#mins").html("00:");
$("#seconds").html("00");
});
function startTimer() {
timex = setTimeout(function () {
seconds++;
if (seconds > 59) {
seconds = 0;
mins++;
if (mins > 59) {
mins = 0;
hours++;
if (hours < 10) {
$("#hours").text("0" + hours + ":");
} else $("#hours").text(hours + ":");
}
if (mins < 10) {
$("#mins").text("0" + mins + ":");
} else $("#mins").text(mins + ":");
}
if (seconds < 10) {
$("#seconds").text("0" + seconds);
} else {
$("#seconds").text(seconds);
}
startTimer();
}, 1000);
}
});
</script>
<style>
#divstyle {
margin-left: 300px;
margin-top: 100px;
background-color: lightslategrey;
width: 450px;
height: 180px;
}
#timer {
font-size: 100px;
padding-left: 30px;
width: 1000px;
}
#buttons {
padding-top: 20px;
padding-left: 100px;
width: 600px;
}
#buttons button {
font-size: 24px;
color: brown;
}
</style>
</head>
<body>
<div id="divstyle">
<div id="timer">
<span id="hours">00:</span>
<span id="mins">00:</span>
<span id="seconds">00</span>
</div>
<div id="buttons">
<button id="startbtn">Start</button>
<button id="stopbtn">Stop</button>
<button id="resetbtn">Reset</button>
</div>
</div>
</body>
</html>Output:
Below is the screen which displays once the code gets executed:
On clicking the “Start” button, the Stopwatch starts as shown in the screenshot below:
Explanation: On clicking the “Stop” button, the timer stops. The reset button is clicked to reset the timer.
Example #2
The following example is a similar illustration as above showing a timer with start and reset controls:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery timer example</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
var i = 1;
$("#startBtn").click(function (e) {
setInterval(function () {
$("#stopTimer").html(i);
i++;
}, 1000); });
$("#resetBtn").click(function (e) {
i = 0;
});
});
</script>
<style>
#divstyle {
margin-left: 500px;
margin-top: 100px;
background-color: lightslategrey;
width: 250px;
height: 150px;
}
#stopTimer{
text-align: center;
font-weight: bold;
font-size: x-large;
padding-top: 20px;
background-color: cadetblue;
}
#startBtn {
padding-top: 5px;
padding-bottom: 10px;
margin-left: 60px;
margin-top: 50px;
text-align: center;
font-weight: bold;
font-size: medium;
background-color: cadetblue;
}
#resetBtn {
padding-top: 5px;
padding-bottom: 10px;
margin-left: 20px;
margin-top: 50px;
text-align: center;
font-weight: bold;
font-size: medium;
background-color: cadetblue;
}
</style>
</head>
</head>
<body>
<div id ="divstyle">
<div id="stopTimer">0</div>
<button id="startBtn">Start</button>
<button id="resetBtn">Reset</button>
</div>
</div>
</body>
</html>Output:
Below is the screen which displays once the above code gets executed:
On clicking the “Start” button, the timer starts and on clicking the “Reset” button, the timer resets:
Example #3
Let us consider one more example where we create a Countdown timer displaying days, hours, minutes and seconds:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery timer example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function createTimer() {
var endTime = new Date("2020/05/10 00:00:00");
endTime = (Date.parse(endTime) / 1000);
var startTime = new Date();
startTime = (Date.parse(startTime) / 1000);
var remainingTime = endTime - startTime;
var days = Math.floor(remainingTime / 86400);
var hours = Math.floor((remainingTime - (days * 86400)) / 3600);
var minutes = Math.floor((remainingTime - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((remainingTime - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");
}
setInterval(function() { createTimer(); }, 1000);
</script>
<style>
body {
font-family: 'Titillium Web', cursive;
width: 800px;
margin: 0 auto;
text-align: center;
color: white;
background: #222;
font-weight: 100;
}
div {
display: inline-block;
line-height: 1;
padding: 10px;
font-size: 40px;
}
span {
display: block;
font-size: 20px;
color: white;
}
#divstyle{
margin-top: 100px;
background-color: lightslategrey;
width: 600px;
height: 200px;
}
#days {
font-size: 100px;
color: #db4844;
}
#hours {
font-size: 100px;
color: #f07c22;
}
#minutes {
font-size: 100px;
color: #f6da74;
}
#seconds {
font-size: 50px;
color: #abcd58;
}
</style>
</head>
</head>
<body>
<div id ="divstyle">
<div id="timer">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</div>
</body>
</html>Output:
Below is the screenshot which displays when the above code gets executed. The give jQuery Countdown timer shows the days, hours, minutes, and seconds:
Conclusion
In this article, we discussed the jQuery timer feature which enables you to set timers on the animations you create to make your web page more attractive. There are two methods, setInterval, and setTimeout which basically delay the execution of a function for a certain period of time.
Recommended Articles
This is a guide to jQuery Timer. Here we discuss an introduction to jQuery Timer, with appropriate syntax and respective examples for better understanding. You can also go through our other related articles to learn more –
