0

there's a meter like this:

const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Jun 30, 2020 00:00: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);
    }, second)
li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 4.5rem;
}
<ul>
    <li><span id="days"></span>days</li>
    <li><span id="hours"></span>Hours</li>
    <li><span id="minutes"></span>Minutes</li>
    <li><span id="seconds"></span>Seconds</li>
  </ul>

Can you tell me how to automatically set a different date when the counter is zeroed?

That is, in this example, the counter works till June 30, after that you need to set the date September 30, then December 31, then March 31, then again June 30 and all over again.

2 Answers2

1

You should store the fixed dates to make 3 months calculations. So that you can create a local variable to store your fixed dates

const dates = [
    new Date('Dec 31, 2019 00:00:00'),
    new Date('March 31, 2020 00:00:00'),
    new Date('Jun 30, 2020 00:00:00'),
    new Date('Sep 31, 2020 00:00:00')
]

After that you can find the date that should be counted down with a function:

let getCountdown = function (now) {
  let found = false;
  dates.forEach((date, index) => {
    if(date > now && !found){

      found = dates[index];
    }
  })
  return found;
}

Then you can call the function:

let countDown = getCountdown(new Date()).getTime(),

To see working solution:

const dates = [
  new Date('Dec 31, 2019 00:00:00'),
  new Date('March 31, 2020 00:00:00'),
  new Date('Jun 30, 2020 00:00:00'),
  new Date('Sep 31, 2020 00:00:00'),
]

const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24; 

let getCountdown = function (now) {
  let found = false;
  dates.forEach((date, index) => {
    if(date > now && !found){
 
      found = dates[index];
    }
  })
  return found;
}

let countDown = getCountdown(new Date()).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);
    }, second)
li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 4.5rem;
}
<ul>
    <li><span id="days"></span>days</li>
    <li><span id="hours"></span>Hours</li>
    <li><span id="minutes"></span>Minutes</li>
    <li><span id="seconds"></span>Seconds</li>
  </ul>

If you want to add dates programatically you can use following function that mentioned in this reply

function addMonths(date, months) {
    var d = date.getDate();
    date.setMonth(date.getMonth() + +months);
    if (date.getDate() != d) {
      date.setDate(0);
    }
    return date;
}
0

Simply checking the date and changing the date as needed.

x = setInterval(function() {

  let now = new Date().getTime(),
    distance = countDown - now;

  if (distance <= 0) {
    const dateObject = new Date(countDown);
    const month = dateObject.getMonth();
    if (month < 11) {
      dateObject.setMonth(month === 2 ? 5 : month === 5 ? 8 : 11);
      dateObject.setDate(month === 2 ? 30 : month === 5 ? 30 : 31);
    } else {
      dateObject.setYear(dateObject.getFullYear() + 1);
      dateObject.setMonth(2);
      dateObject.setDate(31);
    }
    countDown = dateObject.getTime();
  }

  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)
Community
  • 1
  • 1
Dane Brouwer
  • 2,827
  • 1
  • 22
  • 30