CODEWITHSUNDEEP
javascriptjquerycountdown
user4925536
user4925536

Reputation:

jquery countdown years months days

I have this countdown in jQuery, but the months and days are not shown the correct number. The error is in the calculation of the months and days:

seconds / (60 * 60 * 24 * 30.41666666 * 12)

This is the Jquery:

(function($)  {

$.fn.countdown = function(options, callback) {

var settings = { 'date': null }

if (options) {
  $.extend(settings, options)
}

this_sel = $(this);

function count_ecec() {
  eventDate = Date.parse(settings['date']) / 1000;
  currentDate = Math.floor( $.now() / 1000 );

  if (eventDate <= currentDate ) {
    callback.call(this);
    clearInterval(interval);
  }

  seconds = eventDate - currentDate;

  if (this_sel.find('.years').length > 0) {
    years = Math.floor( seconds / ( 60 * 60 * 24 * 30.41666666 * 12 ) );
    seconds -= years * 60 * 60 * 24 * 30.41666666 * 12  ;
  }

  if (this_sel.find('.days').length > 0) {
    days = Math.floor( seconds / ( 60 * 60 * 24 * 30.41666666 ) );
    seconds -= days * 60 * 60 * 24 * 30.41666666;
}
    if (this_sel.find('.month').length > 0) {
    month = Math.floor( seconds / ( 60 * 60 * 24 ) );
    seconds -= month * 60 * 60 * 24 ;
}
  if (!isNaN(eventDate)) {
    if (this_sel.find('.years').length > 0) {
      this_sel.find('.years').text(years);
  }
  if (this_sel.find('.days').length > 0) {
    this_sel.find('.days').text(days);
  }
  if (this_sel.find('.month').length > 0) {
    this_sel.find('.month').text(month);
  }
  }
}
count_ecec();
interval = setInterval(count_ecec, 1000);
}

}) (jQuery);

And this is the HTML:

 <div class="large-5 large-centered columns counter">                       
             <div class="container">
              <div id="countdown">
                <div class="large-4 columns">   
                    <span>Día</span>
                    <span class="days"></span> 
                </div>
                <div class="large-4 columns">
                    <span>Mes</span>
                    <span class="month"></span> 
                </div>
                <div class="large-4 columns">
                    <span>Año</span>
                    <span class="years"></span> 
                </div>
              </div>
            </div>
          </div>

<script src="js/countdown.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown').countdown({date: '15/12/2016'}, function() {
    $('#countdown').text('');
  });
});
</script>

Upvotes: 0

Views: 745

Answers (1)

Luke Kot-Zaniewski
Luke Kot-Zaniewski

Reputation: 1161

I think you have the equations for days and months flip flopped ....

days = Math.floor( seconds / ( 60 * 60 * 24 * 30.41666666 ) );

should be

months = Math.floor( seconds / ( 60 * 60 * 24 * 30.41666666 ) );

Upvotes: 1

Related Questions