JavaScript | Timer - Tutorialspoint.dev

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:

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

JavaScript | Timer

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books