JavaScript | Timer


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


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:

        //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 {
                    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);
<!-- onload function is evoke when page is load -->
<!--countdown function is called when page is loaded -->
<body onload="countdown();">
        Time Left ::
        <input id="minutes" type="text" style="width: 10px;
             border: none; font-size: 16px; 
            font-weight: bold; color: black;"><font size="5"> :
        <input id="seconds" type="text" style="width: 20px;
                        border: none; font-size: 16px;
                        font-weight: bold; color: black;">

After clicking on the run button-

After some time-

When Less than 1 minute is left-

When timer is up-

This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment



load comments

Subscribe to Our Newsletter