Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

JavaScript | Timer

  • Difficulty Level : Expert
  • Last Updated : 19 Feb, 2019

Prerequisites:

In this post, a timer has been shown that shows the countdown and its colour/message gets changed after every specific period of time.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Syntax:

setTimeout(function, milliseconds, parameter1, ...)

Parameter: It accept some parameters which are specified below-



  • function: It is the function that will be executed.
  • milliseconds: It is the number of milliseconds to wait before executing the code. It is optional and its default value is zero(0).
  • parameter1: It is additional parameters to pass to the function and it is optional.

Return Value: It returns a number representing the ID value of the timer that is set.

JavaScript code that set the timer of 2 minutes and when the times up the Page alert “times up”. The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

JavaScript code to implement the timer:




<html>
  
<head>
    <script>
        //set minutes
        var mins = 2;
  
        //calculate the seconds
        var secs = mins * 60;
  
        //countdown function is evoked when page is loaded
        function countdown() {
            setTimeout('Decrement()', 60);
        }
  
        //Decrement function decrement the value.
        function Decrement() {
            if (document.getElementById) {
                minutes = document.getElementById("minutes");
                seconds = document.getElementById("seconds");
  
                //if less than a minute remaining
                //Display only seconds value.
                if (seconds < 59) {
                    seconds.value = secs;
                }
  
                //Display both minutes and seconds
                //getminutes and getseconds is used to
                //get minutes and seconds
                else {
                    minutes.value = getminutes();
                    seconds.value = getseconds();
                }
                //when less than a minute remaining
                //colour of the minutes and seconds
                //changes to red
                if (mins < 1) {
                    minutes.style.color = "red";
                    seconds.style.color = "red";
                }
                //if seconds becomes zero,
                //then page alert time up
                if (mins < 0) {
                    alert('time up');
                    minutes.value = 0;
                    seconds.value = 0;
                }
                //if seconds > 0 then seconds is decremented
                else {
                    secs--;
                    setTimeout('Decrement()', 1000);
                }
            }
        }
  
        function getminutes() {
            //minutes is seconds divided by 60, rounded down
            mins = Math.floor(secs / 60);
            return mins;
        }
  
        function getseconds() {
            //take minutes remaining (as seconds) away 
            //from total seconds remaining
            return secs - Math.round(mins * 60);
        }
    </script>
</head>
<!-- onload function is evoke when page is load -->
<!--countdown function is called when page is loaded -->
  
<body onload="countdown();">
    <div>
        Time Left ::
        <input id="minutes" type="text" style="width: 10px;
             border: none; font-size: 16px; 
            font-weight: bold; color: black;"><font size="5"> :
                        </font>
        <input id="seconds" type="text" style="width: 20px;
                        border: none; font-size: 16px;
                        font-weight: bold; color: black;">
    </div>
</body>
  
</html>

Output:
After clicking on the run button-

After some time-

When Less than 1 minute is left-

When timer is up-




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!