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-
leave a comment
0 Comments