JavaScript | Timer

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.

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.