jQuery.countdown样式

Question

我已经用http://hilios.github.io/jQuery.countdown/创建了一个jQuery倒计时器

<h1>Count down timer</h1>

  <div id="getting-started"></div>

  <script type="text/javascript">
    $('#getting-started').countdown('2016/01/01', function(event) {
      $(this).html(event.strftime('%w weeks %d days %H:%M:%S'));
    });
  </script>

这里有一个插入器：http://plnkr.co/edit/gcewqxLMchFmWgZjwpwW?p=preview

但是，我是否设计了倒计时的样式，以达到上述主页的倒计时效果？

Answer 1

通过查看主页的源代码，我设法将类似的东西“hack”在一起：http://plnkr.co/edit/2UwnSfidZHWDt1eg9P4n?p=preview

这里面有很多内联JS：

 $(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');
    // Parse countdown string to an object
    function strfobj(str) {
      var parsed = str.match(parser),
        obj = {};
      labels.forEach(function(label, i) {
        obj[label] = parsed[i]
      });
      return obj;
    }
    // Return the time components that diffs
    function diff(obj1, obj2) {
      var diff = [];
      labels.forEach(function(key) {
        if (obj1[key] !== obj2[key]) {
          diff.push(key);
        }
      });
      return diff;
    }
    // Build the layout
    var initData = strfobj(currDate);
    labels.forEach(function(label, i) {
      $example.append(template({
        curr: initData[label],
        next: initData[label],
        label: label
      }));
    });
    // Starts the countdown
    $example.countdown(nextYear, function(event) {
      var newDate = event.strftime('%w:%d:%H:%M:%S'),
        data;
      if (newDate !== nextDate) {
        currDate = nextDate;
        nextDate = newDate;
        // Setup the data
        data = {
          'curr': strfobj(currDate),
          'next': strfobj(nextDate)
        };
        // Apply the new values to each node that changed
        diff(data.curr, data.next).forEach(function(label) {
          var selector = '.%s'.replace(/%s/, label),
              $node = $example.find(selector);
          // Update the node
          $node.removeClass('flip');
          $node.find('.curr').text(data.curr[label]);
          $node.find('.next').text(data.next[label]);
          // Wait for a repaint to then flip
          _.delay(function($node) {
            $node.addClass('flip');
          }, 50, $node);
        });
      }
    });
  });

Answer 2

只需在strftime函数中添加div，就可以按您想要的方式设置样式：

$('#getting-started').countdown('2025/02/25', function(event) {
    var $this = $(this).html(event.strftime(''
    + '<div class="test">%w</div> weeks '
    + '<div class="test">%d</div> days '
    + '<div class="test">%H</div> hr '
    + '<div class="test">%M</div> min '
    + '<div class="test">%S</div> sec'));
});

.test{
color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>

<nav><div id="getting-started"></ul></nav>

​