How to create an evergreen counter?

Hello,

I need to use this counter:

https://preview.webflow.com/preview/countdown-life?utm_medium=preview_link&utm_source=designer&utm_content=countdown-life&preview=f6e6f40dd51471a56cb2f22cb8a5fda6&mode=preview

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. :slight_smile:

There are quiet a few posts about countdown timers. Search the forum :slight_smile:

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 :partying_face: … 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

Hey Anthony,

Is it possible to create a clock-in page in webflow?

Here is a screenshot

I have implemented this code on my project but it is not working in mobile view. Is anyone else having this issue?