Hello,
I need to use this counter:
As an evergreen on a website. There is a code I can add to make it start over again after a certain period of time?
Hello,
I need to use this counter:
As an evergreen on a website. There is a code I can add to make it start over again after a certain period of time?
Hi Alexander,
This countdown timer is by a specific date. If you need something that restarts everytime, you will need a different code.
Ok, where do I find such a code? I like this timer because I can simply design it in Webflow to fit the website branding.
There are quiet a few posts about countdown timers. Search the forum
I searched. I don’t find a code with a timer that restart itself after the deadline. For example, I want to be able to add a 5h deadline, after 5h I need the timer to start over again. I see codes have a date as a deadline. Also, I use this code because I can design it in Webflow easily.
I solved the issue, this is the code:
<script> (function() {
var deadline = new Date();
deadline.setMinutes( deadline.getMinutes() + 2000 );
function pad(num, size) {
var s = "0" + num;
return s.substr(s.length-size);
}
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date()),
seconds = Math.floor((t / 1000) % 60),
minutes = Math.floor((t / 1000 / 60) % 60),
hours = Math.floor((t / (1000 * 60 * 60)) % 24),
days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function clock(id, endtime) {
var days = document.getElementById(id + '-days')
hours = document.getElementById(id + '-hours'),
minutes = document.getElementById(id + '-minutes'),
seconds = document.getElementById(id + '-seconds');
var timeinterval = setInterval(function() {
var t = getTimeRemaining(endtime);
if (t.total <= 0){
clearInterval(timeinterval);
deadline = new Date();
deadline.setMinutes( deadline.getMinutes() + 1 );
clock('js-clock', deadline);
} else {
days.innerHTML = pad(t.days, 2);
hours.innerHTML = pad(t.hours, 2);
minutes.innerHTML = pad(t.minutes, 2);
seconds.innerHTML = pad(t.seconds, 2);
}
}, 1000);
}
clock('js-clock', deadline); })(); </script>
Good to hear you found a way !
I found the question interesting, so here is my new year countdown version … exept you’ll never get there… one minute will always be added once the countdown hits its deadline.
JavaScript
// 🍋 options
let delay = 1,
deadline = new Date("December 31 2019, 23:59:59");
// 🥝 update the count down every 1 second
let interval = setInterval(function() {
// get todays date and time + setup forever delay in milliseconds
let now = new Date().getTime(),
forEver = new Date(Date.parse(new Date()) + delay * 60 * 1000);
// find the distance between now an the count down date
let distance = deadline - now;
// 🍑 time calculations for days, hours, minutes and seconds
let seconds = Math.floor((distance / 1000) % 60),
minutes = Math.floor((distance / 1000 / 60) % 60),
hours = Math.floor((distance / (1000 * 60 * 60)) % 24),
days = Math.floor(distance / (1000 * 60 * 60 * 24));
// 🍒 inject result into layout
document.getElementById(
"demo"
).innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
// 🥥 if deadline reached, switch to forever mode
if (distance < 1000) {
deadline = forEver;
} // end if
}, 1000); // ⏱ end interval
I have implemented this code on my project but it is not working in mobile view. Is anyone else having this issue?