You are currently viewing How To Count Time In JavaScript ( Time Counter)

How To Count Time In JavaScript ( Time Counter)

How To Count Time In JavaScript ( Time Counter)

How To Count Time In JavaScript ( Time Counter)
How To Count Time In JavaScript ( Time Counter)

 

Welcome to today’s tutorial. Today we are going to create a Time Counter for 60 Seconds Using JavaScript. For this, we are going to use HTML, CSS, and JavaScript. and if you want to can change Time Counter from 60 seconds to 30 minutes or 60 minutes Through a Change in the Javascript code.

You need basic ES6 knowledge for this javascript project. This tutorial is well suited for javascript intermediates. Let us get started with the project.

By the end of this blog after reading, you can make a Time Countdown not only of sixty seconds you can create your own customized countdown timer even if you want a Time Countdown for days/hours or years it totally depends on you.

Hey Learners,

Before moving on to the code Let’s First discuss what are the prerequisite required for this tutorial.

setInterval () Function:-

The setInterval() method calls a function at specified intervals (in milliseconds).

The setInterval() method continues calling the function until clearInterval() is called, or the window is closed.

1 second = 1000 milliseconds.

To execute the function only once, use the setTimeout() method instead.
To clear an interval, use the id returned from setInterval():
myInterval = setInterval(function, milliseconds);
Then you can to stop the execution by calling clearInterval():
clearInterval(myInterval);

before writing the code let’s see the live server of the countdown so you can understand it perfectly.

Live Preview Of Time Counter:-

Html CODE For Time Counter:- 

Html is the basic layout of any webpage. So we will insert only a div that has a class named a timer.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="timer"></div>
</body>
</html>

CSS CODE For Time Counter:- 

CSS is the styling of the layout. We have used the flex property of the CSS.
50+ Html ,Css & Javascript Projects With Source Code

FLEX Container:-

Flex Container aligns horizontally al the items in the same line in the flex container.
justify-content aligns the item horizontally.
align item align the item vertically.

 body{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    background:linear-gradient(pink,aqua)
    }
    .timer{
    color: white;
font-size:56px;
font-weight: bolder;
border:5px solid white;
padding:50px;
border-radius:50%;
    }

JavaScript CODE For Time Counter:- 

 In JavaScript, I have used the DOM property and the set interval function:-

var time=document.getElementsByClassName("timer")
 
 var timings=60;
 var i=0;
     var myInterval = setInterval(Timeout, 1000);
    function Timeout(){
     
        time[0].innerHTML=`${(timings*60-i)%60}`;
         
i++;
    }

Now your Timer Countdown is ready finally! Hurrah! you can use this countdown in many places like on e-commerce websites where deals are ending in 30 minutes or sometimes u can use it as a countdown when you are studying/meditating, etc.

25+ HTML & CSS Card Design Layout Style

I hope you have loved this blog and learned many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us the motivation to create more blogs.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

Written by @Himanshu Singh. 

Leave a Reply