Countdown - Include Month

1

I have a page with a countdown. Where will show the time that is missing for a certain thing. It's working perfectly. However, I would like to include one more variable. In case the month . That is, before the normal time that is shown nowadays, I would like to include how many days are missing 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>
    
asked by anonymous 27.09.2017 / 00:48

3 answers

3

Well, that code almost does that. 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>
    
27.09.2017 / 00:55
2

Talk to Felipe, okay? I suggest you use momentjs - as well as treat the differences between dates for you, you still have the advantage of not being worry about maintaining an algorithm that can lead to complexities such as leap years and months with total 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 

Follow the example in JSFiddle: link

I hope I have helped. Hugs

    
27.09.2017 / 02:04
1

If you use a jquery-ready script for counters do not help?

Take a look at this one:

link

So you can call it like this:

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

That way it counts the way you want it in an easier way without having to worry about the calculations.

    
27.09.2017 / 01:01