Friday, September 26, 2025
HomeLanguagesJavascriptJavaScript Timer

JavaScript Timer

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

Syntax:

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

Parameter: It accepts 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 an additional parameter 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 to 2 minutes and when the time is up the Page alert “times up”. The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

Prerequisites: GetMinutes(), GetSeconds() and SetInterval() Method

JavaScript code to implement the timer:

Example: In this example, we will start a timer and display a message when timer stops. 

HTML




<script>
    var mins=.1;
    var secs=mins*60;
    function countdown() {
        setTimeout('Decrement()',60);
    }
    function Decrement() {
        if(document.getElementById) {
            minutes=document.getElementById("minutes");
            seconds=document.getElementById("seconds");
            if(seconds<59) {
                seconds.value=secs;
            }
            else {
                minutes.value=getminutes();
                seconds.value=getseconds();
            }
            if(mins<1) {
                minutes.style.color="red";
                seconds.style.color="red";
            }
            if(mins<0) {
                alert('time up');
                minutes.value=0;
                seconds.value=0;
            }
            else {
                secs--;
                setTimeout('Decrement()',1000);
            }
        }
    }
 
    function getminutes() {
        mins=Math.floor(secs/60);
        return mins;
    }
 
    function getseconds() {
        return secs-Math.round(mins*60);
    }
</script>
<body onload="countdown();">
    <div style="display: flex; width:80%;
                justify-content:center; padding-top: 0%;">
        Time Left ::
    </div>
    <div style="display: flex; width:80%;
                justify-content:center; padding-top: 0%;">
        <input id="minutes" type="text" style="width: 2%; border: none; font-size: 16px;
                      font-weight: bold; color: black;">
        <font size="5">
            :
        </font>
        <input id="seconds" type="text" style="width: 2%; border: none; font-size: 16px;
                      font-weight: bold; color: black;">
    </div>
</body>


Output:

 

RELATED ARTICLES

Most Popular

Dominic
32321 POSTS0 COMMENTS
Milvus
84 POSTS0 COMMENTS
Nango Kala
6690 POSTS0 COMMENTS
Nicole Veronica
11857 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11912 POSTS0 COMMENTS
Shaida Kate Naidoo
6802 POSTS0 COMMENTS
Ted Musemwa
7073 POSTS0 COMMENTS
Thapelo Manthata
6761 POSTS0 COMMENTS
Umr Jansen
6768 POSTS0 COMMENTS