xxxxxxxxxx
/** https://www.youtube.com/watch?v=x7WJEmxNlEs */
//timeInMins repersent time in minutes. eg: timeInMins = 5 --> 5 minutes
function timer(timeInMins) {
const demo = document.getElementById("demo");
console.log("timeInMins: " + timeInMins);
let time = 60 * prepareTime;
setInterval(function () {
let minutes = Math.floor(time / 60);
let seconds = time % 60;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
demo.innerHTML = `${minutes}:${seconds}`;
time--;
}, 1000);
}
xxxxxxxxxx
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Mar 16, 2021 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
xxxxxxxxxx
<!DOCTYPE HTML>
<html>
<body>
<p id="demo"></p>
<button onclick="countdownTimeStart()">Start Timer</button>
<script>
// Set the date we're counting down to
function countdownTimeStart(){
var countDownDate = new Date("Sep 25, 2025 15:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
}
</script>
</body>
</html>
Run code snippet
xxxxxxxxxx
const startNumber = 10, stopNumber = 0, skip = 1;
for (let i = startNumber; i >= stopNumber; i -= skip) {
console.log(i);
}
/*
10
9
8
7
6
5
4
3
2
1
0
*/
xxxxxxxxxx
// To make a countdown you can use a for loop and console.log(msg);
console.log("We have liftoff in T minus...");
for (let i = 10; i >= 0; i--) {
console.log(i);
}
console.log("We have liftoff!");
xxxxxxxxxx
const bomb = (count, delay) => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(count)
resolve()
}, delay)
})
}
This code defines a function called bomb which takes two parameters count and delay. The function returns a new Promise that will resolve after the specified delay time has passed.
Inside the Promise, the setTimeout function is called with a callback function that will execute after the specified delay. The callback function will log the value of the count parameter to the console and then resolve the Promise.
In other words, if you call bomb with a count and delay value, it will return a Promise that will wait for the specified delay time and then log the count value to the console before resolving the Promise.
xxxxxxxxxx
async function executeTimers() {
const waitTime = 1000;
const countDownDisplay = ["Three", "Two", "One", "BOOM"]
for (let el of countDownDisplay) {
await bomb(el, waitTime);
}
}
executeTimers()
We then create an array named countDownDisplay to store the strings "Three", "Two", "One", and "BOOM".
We then use the for...of loop to iterate over each element in the countDownDisplay array. During each iteration, we call the executeCountDownTimer function with the current countDownDisplay and the waitTime variable. The await keyword is used before calling the function to ensure that each string of number is displayed before moving on to the next one.
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Countdown timer using HTML and JavaScript</title>
</head>
<body>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2023 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
xxxxxxxxxx
// Set the countdown duration (in seconds)
const duration = 60;
// Get the HTML element where you want to display the countdown
const countdownElement = document.getElementById('countdown');
// Update the countdown every second
const countdown = setInterval(() => {
// Calculate remaining minutes and seconds
const minutes = Math.floor(duration / 60);
const seconds = duration % 60;
// Display the countdown in the specified element
countdownElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
// Decrease the countdown duration
duration--;
// Check if countdown has reached zero
if (duration < 0) {
clearInterval(countdown); // Stop the countdown
countdownElement.textContent = 'Countdown finished!';
}
}, 1000);