javascript - 实现 jCounter

Question

我一直在尝试实现这个页面，除了 jCounter 之外，我已经设置了所有的东西。如何更改事件时间？我尝试查找 jCounter 页面，但这没有帮助。我是一个普通的初学者所以我希望你能提供帮助。

我尝试过的:更改这部分代码:

var settings = { 
          'date': null,
          'format': null
      };

自定义日期并将格式设置为“开”。

但我认为上面的设置只是在开始之前用空值初始化值？如果是这样，我实际上应该在哪里输入要倒计时的事件日期？我已经检查了 index.html 文件，它只有 countdown.js 调用和应用于它的 css，从未提及 eventdate。因此，通过这些设置，计数器从 198 天开始倒计时。我不确定它从哪里得到这个事件日期。任何帮助，将不胜感激。谢谢!

这是计数器教程的链接:http://devingredients.com/2011/11/building-an-extensible-jquery-countdown-plugin-from-scratch/

Answer 1

您是否尝试了文档中的确切示例？

$(document).ready(function() {

  $("#countdown").countdown({
    date: "25 december 2014 1:00:00", // add the countdown's end date (i.e. 3 november 2012 12:00:00)
    format: "on" // on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
  },

  function() { 

    // the code here will run when the countdown ends
    alert("Santa on the roof!");

  });
});

尝试运行下面的代码片段...

(function($){

  $.fn.countDown = function (options) {
    config = {};

    $.extend(config, options);

    diffSecs = this.setCountDown(config);

    $('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
    $(this).doCountDown($(this).attr('id'), diffSecs, 500);

    if (config.onComplete)
    {
      $.data($(this)[0], 'callback', config.onComplete);
    }
    if (config.omitWeeks)
    {
      $.data($(this)[0], 'omitWeeks', config.omitWeeks);
    }
    return this;

  };

  $.fn.stopCountDown = function () {
    clearTimeout($.data(this[0], 'timer'));
  };

  $.fn.startCountDown = function () {
    this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
  };

  $.fn.setCountDown = function (options) {
    var targetTime = new Date();

    if (options.targetDate)
    {
      targetTime.setDate(options.targetDate.day);
      targetTime.setMonth(options.targetDate.month-1);
      targetTime.setFullYear(options.targetDate.year);
      targetTime.setHours(options.targetDate.hour);
      targetTime.setMinutes(options.targetDate.min);
      targetTime.setSeconds(options.targetDate.sec);
    }
    else if (options.targetOffset)
    {
      targetTime.setDate(options.targetOffset.day + targetTime.getDate());
      targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
      targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
      targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
      targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
      targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
    }

    var nowTime = new Date();

    diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);

    $.data(this[0], 'diffSecs', diffSecs);

    return diffSecs;
  };

  $.fn.doCountDown = function (id, diffSecs, duration) {
    $this = $('#' + id);
    if (diffSecs <= 0)
    {
      diffSecs = 0;
      if ($.data($this[0], 'timer'))
      {
        clearTimeout($.data($this[0], 'timer'));
      }
    }

    secs = diffSecs % 60;
    mins = Math.floor(diffSecs/60)%60;
    hours = Math.floor(diffSecs/60/60)%24;
    if ($.data($this[0], 'omitWeeks') == true)
    {
      days = Math.floor(diffSecs/60/60/24);
      weeks = Math.floor(diffSecs/60/60/24/7);
    }
    else 
    {
      days = Math.floor(diffSecs/60/60/24)%7;
      weeks = Math.floor(diffSecs/60/60/24/7);
    }

    $this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
    $this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
    $this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
    $this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
    $this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);

    $.data($this[0], 'diffSecs', diffSecs);
    if (diffSecs > 0)
    {
      e = $this;
      t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
      $.data(e[0], 'timer', t);
    } 
    else if (cb = $.data($this[0], 'callback')) 
    {
      $.data($this[0], 'callback')();
    }

  };

  $.fn.dashChangeTo = function(id, dash, n, duration) {
    $this = $('#' + id);
    d2 = n%10;
    d1 = (n - n%10) / 10

    if ($('#' + $this.attr('id') + ' .' + dash))
    {
      $this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:first', d1, duration);
      $this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:last', d2, duration);
    }
  };

  $.fn.digitChangeTo = function (digit, n, duration) {
    if (!duration)
    {
      duration = 800;
    }
    if ($(digit + ' div.top').html() != n + '')
    {
      $(digit + ' div.top').css({'display': 'none'});
      $(digit + ' div.top').html((n ? n : '0')).slideDown(duration);
      $(digit + ' div.bottom').animate({'height': ''}, duration, function() {
        $(digit + ' div.bottom').html($(digit + ' div.top').html());
        $(digit + ' div.bottom').css({'display': 'block', 'height': ''});
        $(digit + ' div.top').hide().slideUp(10);


      });
    }
  };
  
  $(document).ready(function() {
    $('#cd_1').countDown({
      targetDate: {
        'day': 		25,
        'month': 	12,
        'year': 	2014,
        'hour': 	20,
        'min': 		25,
        'sec': 		0,
        'utc':    true
      }, omitWeeks: true
    });
  });

})(jQuery);

.card {
  display: inline-block;
  margin: 10px;
  padding: 5px;
  border: 2px solid #ccc;
  background: #ddd;
  min-width: 340px;
  min-height: 80px;
}

.countdown_dashboard {
  font-family: sans-serif;
  font-size: 12px;
  color: #444;
}

.title {
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 100;
  color: #002244;
}

.lbl {
  font-family: sans-serif;
  font-size: 19px;
  font-weight: 100;
  color: #666;
}

.pad {
padding-right: 30px;
}

.row img {
  padding: 18px 8px 0 0;
}

.dash {
  height: 14px;
  float: left;
  position: relative;
  text-align: center;
}

.dash .digit {
  background: #444;
  color: #fff;
  border: 2px solid #333;
  font-size: 30px;
  float: left;
  position: relative;
  margin: 0 6px 0 0;
  padding: 7px 5px 5px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fb-root"></div>

<table>
  <tr>
    <td>
      <span class="title">&nbsp;&nbsp;According to the <a href="http://community.wolfram.com/groups/-/m/t/326240">data</a>, you will die from ebola in...</span>
    </td>
  </tr>
</table>

<div class="card">
  <table>
    <tr class="row">
      <td><img src="http://davealger.com/ebola/virus.png" width="80" /></td>
      <td style="vertical-align:top;padding-top:10px;padding-right:20px;">
        <div id="cd_1" class="countdown_dashboard">
          <table>
            <tr>
              <td class="lbl">days</td>
              <td class="lbl">hours</td>
              <td class="lbl">mins</td>
              <td class="lbl">secs</td>
            </tr>
            <tr>
              <td>
                <div class="dash days_dash">
                  <div class="digit"></div>
                  <div class="digit"></div>
                </div>
              </td>
              <td>
                <div class="dash hours_dash">
                  <div class="digit"></div>
                  <div class="digit"></div>
                </div>
              </td>
              <td>
                <div class="dash minutes_dash">
                  <div class="digit"></div>
                  <div class="digit"></div>
                </div>
              </td>
              <td>
                <div class="dash seconds_dash">
                  <div class="digit"></div>
                  <div class="digit"></div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </td></tr>
  </table>
</div>