I'm not a js developer, more of graphic designer wannabe developer, I'm creating a website for a friend and I need to make the countdown reset after it reaches the deadline.
I've got this code from Matt Smith on Codepen and it works really well (you can have a look https://m13m.webflow.io/), but unfortunately the timer goes negative and I want it to repeat itself.
How could I do that?
Thank you very much!
<script>
// Original Pen by Matt Smith
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let countDown = new Date('Mar 19, 2022 22:28:00').getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
//if (distance < 0) {
// clearInterval(x);
// 'IT'S MY BIRTHDAY!;
//}
}, second)
</script>
Your code look good. You have to check if distance lower as 0 then clear the timer and print you BDay text.
// Original Pen by Matt Smith
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let countDown = new Date('Mar 19, 2022 22:28:00').getTime();
let x = setInterval(function() {
let now = new Date().getTime();
let distance = countDown - now;
if (distance < 0) {
document.getElementById('msg').innerHTML = "HAPPY BDAY"
clearInterval(x);
return false;
}
document.getElementById('days').innerText = Math.floor(distance / (day));
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
}, second)<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="msg"></div>// Original Pen by Matt Smith
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let round = 1;
const diff = 1; // set timediff in minutes
//let countDown = new Date('Mar 19, 2022 22:28:00').getTime();
let countDown = new Date(new Date().getTime() + diff*60000);
let x = setInterval(function() {
let now = new Date().getTime();
let distance = countDown - now;
if (distance < 0) {
countDown = new Date(new Date().getTime() + diff*60000);
document.getElementById('msg').innerHTML = "HAPPY BDAY" + ' Round => ' + (round++)
}
document.getElementById('days').innerText = Math.floor(distance / (day));
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
}, second)<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="msg"></div>