1

Implementei o plugin jQuery.countdown em uma pagina, gostaria de dar um efeito de paginação quando os numeros mudassem. Igual ao que tem na pagina inicial do plugin

Alguem tem ideia de como fazer ?

0

1 Resposta 1

2

Praticamente tudo foi tirado la da pagina, somente traduzi...

A magica é feita na função $(window).on('load', function() {

$(window).on('load', function() {
  var labels = ['weeks', 'days', 'hours', 'minutes', 'seconds'],
    nextYear = (new Date().getFullYear() + 1) + '/01/01',
    template = _.template($('#main-example-template').html()),
    currDate = '00:00:00:00:00',
    nextDate = '00:00:00:00:00',
    parser = /([0-9]{2})/gi,
    $example = $('#main-example');

  function strfobj(str) {
    var parsed = str.match(parser),
      obj = {};
    labels.forEach(function(label, i) {
      obj[label] = parsed[i]
    });
    return obj;
  }

  function diff(obj1, obj2) {
    var diff = [];
    labels.forEach(function(key) {
      if (obj1[key] !== obj2[key]) {
        diff.push(key);
      }
    });
    return diff;
  }
  var initData = strfobj(currDate);
  labels.forEach(function(label, i) {
    $example.append(template({
      curr: initData[label],
      next: initData[label],
      label: label
    }));
  });
  $example.countdown(nextYear, function(event) {
    var newDate = event.strftime('%w:%d:%H:%M:%S'),
      data;
    if (newDate !== nextDate) {
      currDate = nextDate;
      nextDate = newDate;
      data = {
        'curr': strfobj(currDate),
        'next': strfobj(nextDate)
      };
      diff(data.curr, data.next).forEach(function(label) {
        var selector = '.%s'.replace(/%s/, label),
          $node = $example.find(selector);
        $node.removeClass('flip');
        $node.find('.curr').text(data.curr[label]);
        $node.find('.next').text(data.next[label]);
        _.delay(function($node) {
          $node.addClass('flip');
        }, 50, $node);
      });
    }
  });
});
<link rel="stylesheet" href="http://hilios.github.io/jQuery.countdown/css/main.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>


<div class="main-example">
  <p>
    Próximo ano será daqui:
  </p>
  <div class="countdown-container" id="main-example">
    <div class="time weeks flip">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">sem</span>
    </div>
    <div class="time days flip">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">dias</span>
    </div>
    <div class="time hours flip">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">horas</span>
    </div>
    <div class="time minutes flip">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">min</span>
    </div>
    <div class="time seconds">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">seg</span>
    </div>
  </div>
</div>

Para obter esse efeito, utilizaram as bibliotecas jquery, jquery-countdown alem da biblioteca lodash, utiliza também a biblioteca css padrão do jquery-countdown

/* Depois vou tentar entender a função utilizada, e explico aqui */

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .