How To Count Time In JavaScript ( Time Counter)

How To Count Time Using JavaScript ( Time Counter JavaScript)

How To Count Time Using 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 Code. 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.

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

in our time counter project, we give time to the project like 60 seconds or maybe 60 minutes. so you can add this counted time in the javascript code.

Count Time Using JavaScript

50+ HTML, CSS & JavaScript Projects With Source Code

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:-

Code byN/A
Project DownloadLink Available Below
Language usedHTML ,CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Count Time Table

 

Html CODE For Time Counter:- 

Any website’s core design is HTML. Therefore, we will merely add a div with the class “timer.” The styling and functionality of the timer, which will be introduced through javascript, will be used to form the basic structure for time.

Simple Portfolio Website Using Html And Css With Source Code

Just now, we used the div tag and the class “timer” to build a container. Our timer will be made using CSS and the container.

<html lang="en">

<head>
    <title>Timer</title>
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="timer">Timer</div>

    <script src="script.js"></script>
</body>

</html>

Now if we look at the output you will see a blank screen as we have not added thing other than the timer container.

HTML Output:

Count Time Using JavaScript

CSS CODE For Time Counter:- 

CSS is the styling of the layout. We have used the flex property of the CSS.
 
Restaurant Website Using HTML and CSS

 

FLEX Container:-

All items on the same line are horizontally aligned by the Flex Container.
The item is horizontally aligned using justify-content.
vertical alignment of the item

ADVERTISEMENT

ADVERTISEMENT

 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%;
    }

ADVERTISEMENT

ADVERTISEMENT

Step 1:We will set the display to flex using the body tag selector, and we will centre the items using the align-item attribute. 700 vh is the height setting. We will set a linear gradient with a pink and aqua combo using the background property.

ADVERTISEMENT

Count Time Using JavaScript

Step2: we style .timer div in css,we give basic styling to timer div. give padding and font size, color and that’s all for this css code.

Count Time Using JavaScript

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.

Responsive Resume/CV Website Using HTML & CSS

Javascript Output:

Count Time Using JavaScript

Video Output:

Weather App Using Html,Css And JavaScript 

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. 



Tags: , , ,

Leave a Reply