The timer.jquery plug-in is a simple solution for adding a timer or stopwatch inside any HTML element.
The minified version is the only 7K size that you need to include before the body closing tag.
Developer’s page Download plug-in
Installing the timer plug-in
You may install the plug-in by bower:
The plug-in can also be referred directly from the CDN:
Alternatively, download the plug-in from the GitHub website by the above-provided link and include the JS file before the jQuery file:
Adjust the path as per your directory structure.
The markup:
Use an input type text and refer its class in the jQuery code, for example:
You may also use it in other HTML elements.
See the demo below along with jQuery code and complete markup.
A demo of timer plug-in
After opening the demo page by clicking the link or image below, press the “Start” button. The timer will start in the textbox and you can see buttons to Pause or Remove the timer as well:
The code:
<!DOCTYPE html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
<style>
a:hover {
color: #333;
}
pre {
background-color: #e0e0e0;
border: none;
margin-bottom: 20px;
}
pre, .btn, .form-control {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
h1{
font-family: 'Comfortaa', Helvetica, Arial, sans-serif;
font-weight: 200;
margin-bottom: 20px;
}
em { color: #999; font-size: 12px; }
.top-bar {
background: #000;
padding: 10px 0;
}
.dark {
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid #ccc;
}
.timer {
background: #f2f3f4;
margin-bottom: 10px;
font-weight: bold;
font-size: 16px;
text-shadow: -1px 0 1px #fff;
}
.action {
font-style: italic;
}
.highlight {
color: #a80000;
}
.highlight:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div class='full-width dark'>
<div class='container'>
<h1>A demo of jQuery Timer</h1>
<br>
<h4>Try it out</h4>
<div class='row'>
<div class='col-md-3'>
<input type='text' name='timer' class='form-control timer-demo' placeholder='0 sec' />
</div>
<div class='col-md-9'>
<button class='btn btn-primary btn-lg start-timer-btn'>Start</button>
<button class='btn btn-primary btn-lg resume-timer-btn hidden'>Resume</button>
<button class='btn pause-timer-btn hidden'>Pause</button>
<button class='btn btn-danger remove-timer-btn hidden'>Remove Timer</button>
</div>
</div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src='js/timer.jquery/timer.jquery.js'></script>
<script>
(function(){
var hasTimer = false;
// Init timer start
$('.start-timer-btn').on('click', function() {
hasTimer = true;
$('.timer-demo').timer({
editable: true
});
$(this).addClass('hidden');
$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
});
// Init timer resume
$('.resume-timer-btn').on('click', function() {
$('.timer-demo').timer('resume');
$(this).addClass('hidden');
$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
});
// Init timer pause
$('.pause-timer-btn').on('click', function() {
$('.timer-demo').timer('pause');
$(this).addClass('hidden');
$('.resume-timer-btn').removeClass('hidden');
});
// Remove timer
$('.remove-timer-btn').on('click', function() {
hasTimer = false;
$('.timer-demo').timer('remove');
$(this).addClass('hidden');
$('.start-timer-btn').removeClass('hidden');
$('.pause-timer-btn, .resume-timer-btn').addClass('hidden');
});
// Additional focus event for this demo
$('.timer-demo').on('focus', function() {
if(hasTimer) {
$('.pause-timer-btn').addClass('hidden');
$('.resume-timer-btn').removeClass('hidden');
}
});
// Additional blur event for this demo
$('.timer-demo').on('blur', function() {
if(hasTimer) {
$('.pause-timer-btn').removeClass('hidden');
$('.resume-timer-btn').addClass('hidden');
}
});
})();
</script>
</body>
</html>
An example of executing a function after a certain duration
After a certain duration, you may execute a function.
For that, you may use the duration option to specify the interval.
After that, the specified action can be performed by using the callback function.
In the example, an alert will display after five seconds as you click the button:
The script:
<script>
(function(){
var hasTimer = false;
$('.start-timer-btn').on('click', function() {
hasTimer = true;
$('.timer-demo').timer({
duration: '5s',
callback: function() {
alert('Stop, Your time is up!');
}
});
});
})();
</script>
For more about this plug-in, visit the developer’s page.