Open In App

JavaScript Timer

Improve
Improve
Like Article
Like
Save
Share
Report

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

Prerequisites:

Syntax:

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

Parameter:

  • 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 sets 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.

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

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    let mins = .1;
    let 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>
 
</html>


Output:



Last Updated : 28 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads