Can we have 2 countdown timers on the same page?

Design help Custom code
1

Hey,

This might be an easy solution, but I’m stuck here. I want to add 2 similar countdown timers on the same page, I copied the same code, with a different ID.

This is the link: Webflow - Double Countdown

Live: https://countdown-life-double.webflow.io/

Can you help me?

Thank you! :webflow_heart:

1 Like
2

I found the solution :smiley:

Here it is:

<script> 
(function() {
    var deadline = '2019/09/08 00:00';
  
    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);
        } 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);
	
	function clocks(id, endtime) {
      var dayss = document.getElementById(id + '-days')
          hourss = document.getElementById(id + '-hours'),
          minutess = document.getElementById(id + '-minutes'),
          secondss = document.getElementById(id + '-seconds');
  
      var timeinterval = setInterval(function() {
        var t = getTimeRemaining(endtime);
  
        if (t.total <= 0){
          clearInterval(timeinterval);
        } else {
    dayss.innerHTML = pad(t.days, 2);
    hourss.innerHTML = pad(t.hours, 2);
    minutess.innerHTML = pad(t.minutes, 2);
    secondss.innerHTML = pad(t.seconds, 2);
    }
      }, 1000);
    }
  
    clocks('js-clock-s', deadline);
  })();
</script>
2 Likes
3

Hey Alexander,

Great work on this!

Could I get some help understanding what you did and how I can reproduce this?

Thank you already!

4

Hi @Aron_Matthie and @Alexander_von_Stauff. First of all thank you for the code, Alexander!

Now Aron, I don’t know if you’ve found a solution yet but the code worked for me! The only detail I had to change was the class id for the countdown div and also for each of the number divs.

For example:
Countdown 1 div id was: js-clock
Countdown 1 days div id was: js-clock-days

Now, because Alexander set the other countdown as js-clock-s in the code above, all I had to do was rename the beginning of each div id to “js-clock-s-”

Example:
Countdown 2 div id became: js-clock-s
Countdown 2 days div id became: js-clock-s-days

Captura de Tela 2022-06-01 às 11.45.53

Does that make sense? Hope this helps :slight_smile:

5

Hey folks.

I have hit an issue with my implementation. I have tried to follow the best I can but it seems I can’t get it to work. If someone could have a look at my site and see where I’m going wrong that would be greatly appreciated.

https://preview.webflow.com/preview/vrc?utm_medium=preview_link&utm_source=dashboard&utm_content=vrc&preview=e9f4274aed6df8fca0059d0a7ea4eb20&workflow=preview

Thanks,
Steve

6

Hi @stevenworrell85 I have solved this issue in last year please try to use search input field with advanced mode to narrow down only solved requests with keywords like multiple countdowns.

you can find there is a read-only and live preview and I have updated dates so countdowns are working.

1 Like