How to create start/stop timer using jQuery
In this post, we are going to see how to create a start/stop timer using jQuery.
It becomes useful when you want to allow users to show some time duration before performing some task or show a timer for some quiz-like applications and many more cases.
Steps by Step Guide to Create start/stop timer using Jquery:
If you are new to Jquery or want to learn some basics before starting this tutorial, I must recommend to please checkout learn-javascript-from-scratch and jquery-step-by-step-tutorial-for-beginners
So, here I am going to show how this can be done by using Jquery. we will use a third-party library to achieve this feature with jquery
So let’s start.
Step-1: Add jquery
First of all, you have to add the jquery library to your page:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>Step 2: Create an HTML page
Create a Blank HTML file and put the following code:
<body>
<div class="container">
<div class="card" style="width: 40rem;margin-top: 20vh;margin-left: 40vh;">
<div class="card-body">
<h5 id="timer1" class="card-title"></h5>
<p class="card-text text-note" style="display: none;">Refresh the page to start timer again.</p>
<button type="button" id="pause" class="btn btn-primary">Pause</button>
<button type="button" id="resume" class="btn btn-secondary">Resume</button>
<button type="button" id="remove" class="btn btn-danger">Remove</button>
</div>
</div>
</div>
</body>Step 3: Add Timer Plugin
Add third-party jQuery-timer-plugin after jquery script.
<script src="https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.js"></script>Step 4: JavaScript code
After ending the HTML tag add some Javascript code including with script tag as follow:
<script>
$(document).ready(function () {
//start a timer
$("#timer1").timer();
//pause the timer
$('#pause').on('click', function () {
$('#timer1').timer('pause');
})
//resume the timer
$('#resume').on('click', function () {
$('#timer1').timer('resume');
})
//remove the timer
$('#remove').on('click', function () {
$('#timer1').timer('remove').hide();
$('#pause,#resume,#remove').hide();
$('.text-note').show();
})
});
</script>Now you are done.
If you find any issues check out the complete source code given below:
Complete source code:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jquery Timer Demo</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card" style="width: 40rem;margin-top: 20vh;margin-left: 40vh;">
<div class="card-body">
<h5 id="timer1" class="card-title"></h5>
<p class="card-text text-note" style="display: none;">Refresh the page to start timer again.</p>
<button type="button" id="pause" class="btn btn-primary">Pause</button>
<button type="button" id="resume" class="btn btn-secondary">Resume</button>
<button type="button" id="remove" class="btn btn-danger">Remove</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
//start a timer
$("#timer1").timer();
//pause the timer
$('#pause').on('click', function () {
$('#timer1').timer('pause');
})
//resume the timer
$('#resume').on('click', function () {
$('#timer1').timer('resume');
})
//remove the timer
$('#remove').on('click', function () {
$('#timer1').timer('remove').hide();
$('#pause,#resume,#remove').hide();
$('.text-note').show();
})
});
</script>
</body>
</html>Conclusion:
Thanks for reading.
Do let me know If you face any difficulties please feel free to comment below we love to help you.if you have any feedback suggestion then please inform us by commenting.
Don’t forget to share this tutorial with your friends on Facebook and Twitter
