JavaScript Timer

0 0 1 minute read

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>