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:
