JavaScript Timer
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:
| Attribute | Description |
|---|---|
| function | It is the function that will be executed. |
| milliseconds | It is the number of milliseconds to wait before executing the code. Optional, default value is zero (0). |
| parameter1 | It is an additional parameter to pass to the function. 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.
<!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:
Contact Us