Countdown - include month

Question

I have a page with a countdown. Where will show the time remaining for certain thing. It is working perfectly. However, I would like to include one more variable. In this case the month. That is, before the normal time that is shown today, I would like to include how many days are left for a certain thing.

var countDownDate = new Date("Sep 26, 2017    23:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = hours + "h " +
    minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "<a href='https://www.youtube.com/watch?v=5VhQubIDiRk'>Clica aqui</a><br>Espero que goste.";
  }
}, 1000);

<h1></h1>
<!-- YOUR TITLE HERE -->
<!-- Display the countdown timer in an element -->
<div class="text">Contagem regressiva para a segunda temporada</div>
<p id="demo"></p>
<div class="message">teste</div>

Answer 1

That code already does just about that. It needs to change very little:

var months = Math.floor(distance / (1000 * 60 * 60 * 24 * 30)); // veja o * 30
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
...
document.getElementById("demo").innerHTML = months + "m " + days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";    

var countDownDate = new Date("Sep 26, 2017    23:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var months = Math.floor(distance / (1000 * 60 * 60 * 24 * 30));
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = months + "m " + days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "<a href='https://www.youtube.com/watch?v=5VhQubIDiRk'>Clica aqui</a><br>Espero que goste.";
  }
}, 1000);

<h1></h1>
<!-- YOUR TITLE HERE -->
<!-- Display the countdown timer in an element -->
<div class="text">Contagem regressiva para a segunda temporada</div>
<p id="demo"></p>
<div class="message">teste</div>

Answer 2

Speak Felipe, all right? I suggest you use the momentjs - in addition to dealing with the differences between dates for you, you will still have the advantage of not worrying about maintaining an algorithm that can lead you to complexities such as leap years and months with total of days greater or less than 30

Example:

var getCountDownBetween = function(from, to) {
  // Find the distance between now an the count down date
  var distance = moment.duration(to.diff(from));

  // Time calculations for days, hours, minutes and seconds
  return {
    months: distance.months(),
    days: distance.days(),
    hours: distance.hours(),
    minutes: distance.minutes(),
    seconds: distance.seconds(),
    toString: function() {
      return this.months + 'mo '    
        + this.days + "d " 
        + this.hours + "h " 
        + this.minutes + "m " 
        + this.seconds + "s ";
    }
  };
}

//Tests

getCountDownBetween(moment(), moment());            //0mo 0d 0h 0m 0s

getCountDownBetween(moment('2017-09-06T16:33:09'),
                    moment('2017-09-20T23:52:33')); //0mo 14d 7h 19m 24s

getCountDownBetween(moment('2017-01-01T20:09:09'),
                    moment('2017-07-11T00:51:00')); //6mo 7d 5h 41m 51s 

Following example in Jsfiddle: https://jsfiddle.net/wellington362/fffaseyv/6/

I hope I helped. Hugs

Answer 3

Using jquery ready script for counters does not help??

Take a look at this one:

http://keith-wood.name/countdown.html

You can call him that:

$('#byMonth').countdown({until: longWayOff, format: 'odHM'});

This way you already count the way you want and in an easier way without having to worry about the calculations.