Create Timer in JavaScript

Hello everyone,

In this tutorial I am going to Create one timer widget.

Time widget is used to set timer for many reasons ex: Quiz test.

Now let’s start with the designing part first, I have used bootstrap and jquery for the same.

HTML Code :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Timer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<style>
.timer_box{
width: 100px;
height: 100px;
line-height: 100px;
font-size: 25px;
}
</style>
</head>
<body class="bg-danger">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 mx-auto mt-5 bg-info p-5">
<h1>Javascript Timer</h1>
<hr/>
<label>Enter Seconds</label>
<input type="text" id='seconds_time' class="form-control" />
<div class="row">
            <div class="col-md-4">
                <input type="button" class="btn btn-success mt-3 btn-block start" value="Start" />
            </div>
            <div class="col-md-4">
                <input type="button" class="btn btn-danger mt-3 btn-block stop" value="Stop" />
            </div>
            <div class="col-md-4">
                <input type="button" class="btn btn-warning mt-3 btn-block reset" value="Reset" />
            </div>
</div>
<div>
<div class="timer_box mt-5 bg-dark text-white rounded-circle mx-auto text-center">
0
</div>
</div>
</div>
</div>
</div>
</body>
</html>

 

Above code will give us output as follow :

Create Timer in JavaScript
Create Timer in JavaScript

In the above design I have created one input field and blank box with 0 value for the counter.

Now it’s time to code some JavaScript to make this timer in working condition.

Javascript Code :

<script>
      let count = 50;
      let b = '';
      function timer(){
        $('.counter').html(count);
        if(count==0){
          $('.reset').click();
        }else{
          count--;
        }
      }
      $(document).ready(function(){
        $('.start').click(function(){
          count = $('#seconds_time').val();
          $('#seconds_time').attr('disabled','disabled');
          b = setInterval(timer,1000);
        });
        $('.stop').click(function(){
          clearInterval(b);Untitled folder
        });
        $('.reset').click(function(){
          count = 0;
          $('#seconds_time').val('');
          $('.counter').html("0");
          $('#seconds_time').removeAttr('disabled');
          clearInterval(b);
        });
      });
    </script>

In the above code I have make function for every button on click:

Start Button : Start Interval with 1 second of time and disable input field.

Stop Button : stop the interval time.

Reset Button : Clear Interval change variable value to 0 and remove disabled from input field.

Our output will looks like follow image after this code :

Create Timer in JavaScript
Create Timer in JavaScript

Now here is the final code for all this process:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Timer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.timer_box{
width: 100px;
height: 100px;
line-height: 100px;
font-size: 25px;
}
</style>
<script>
let count = 50;
let b = '';
function timer(){
$('.counter').html(count);
if(count==0){
$('.reset').click();
}else{
count--;
}
}
$(document).ready(function(){
$('.start').click(function(){
count = $('#seconds_time').val();
$('#seconds_time').attr('disabled','disabled');
b = setInterval(timer,1000);
});
$('.stop').click(function(){
clearInterval(b);
});
$('.reset').click(function(){
count = 0;
$('#seconds_time').val('');
$('.counter').html("0");
$('#seconds_time').removeAttr('disabled');
clearInterval(b);
});
});
</script>
</head>
<body class="bg-danger">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 mx-auto mt-5 bg-info p-5">
<h1>Javascript Timer</h1>
<hr/>
<label>Enter Seconds</label>
<input type="text" id='seconds_time' class="form-control" />
<div class="row">
<div class="col-md-4">
<input type="button" class="btn btn-success mt-3 btn-block start" value="Start" />
</div>
<div class="col-md-4">
<input type="button" class="btn btn-danger mt-3 btn-block stop" value="Stop" />
</div>
<div class="col-md-4">
<input type="button" class="btn btn-warning mt-3 btn-block reset" value="Reset" />
</div>
</div>

<div>
<div class="timer_box mt-5 bg-dark text-white rounded-circle mx-auto text-center counter">
0
</div>
</div>
</div>
</div>
</div>
</body>
</html>

So that’s all for today, stay tuned for my further updates.

11 thoughts on “Create Timer in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Nice post. I was checking continuously this blog and I’m impressed! Very helpful information specially the last phase 🙂 I deal with such info much. I was looking for this certain information for a long time. Thanks and good luck.

  2. I am not sure where you are getting your info, but good topic. I needs to spend some time learning much more or understanding more. Thanks for magnificent info I was looking for this information for my mission.

  3. naturally like your website but you need to check the spelling on quite a few of your posts. A number of them are rife with spelling issues and I to find it very bothersome to inform the reality then again I’ll surely come back again.

  4. I am curious to find out what blog system you’re working with? I’m having some small security issues with my latest blog and I’d like to find something more safeguarded. Do you have any recommendations?

  5. Hi I am so thrilled I found your site, I really found you by mistake, while I was searching on Bing for something else, Anyhow I am here now and would just like to say many thanks for a tremendous post and a all round enjoyable blog (I also love the theme/design), I don’t have time to read through it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read much more, Please do keep up the superb job.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.