如何为jQuery倒计时指定小时数

斯拉瓦·梅尔尼科夫(Slava Melnikov)

很抱歉这个愚蠢的问题,但是我该如何指定倒计时的时间呢?现在,我可以添加date-time属性,并在那里指定日期,默认值为00:00:00。我不仅要指定日期,还要指定时间。例如,如何在上午9点(任何日期)而不是午夜(而不是默认的00:00:00)指定此倒数计时?

我将不胜感激任何帮助。

谢谢

(function($) {
  function pad(n) {
    return (n < 10) ? ("0" + n) : n;
  }

  $.fn.showclock = function() {

    var currentDate = new Date();
    var fieldDate = $(this).data('date').split('-');
    var futureDate = new Date(fieldDate[0], fieldDate[1] - 1, fieldDate[2]);
    var seconds = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

    if (seconds <= 0 || isNaN(seconds)) {
      this.hide();
      $('.value-proposition-cd.clearance').hide();
      return this;
    }

    var days = Math.floor(seconds / 86400);
    seconds = seconds % 86400;

    var hours = Math.floor(seconds / 3600);
    seconds = seconds % 3600;

    var minutes = Math.floor(seconds / 60);
    seconds = Math.floor(seconds % 60);

    var html = "";

    if (days != 0) {
      html += "<div class='countdown-container days'>"
      html += "<span class='countdown-value days-bottom'>" + pad(days) + "</span>";
      html += "<span class='countdown-heading days-top'>Days</span>";
      html += "</div>";
    }

    html += "<div class='countdown-container hours'>"
    html += "<span class='countdown-value hours-bottom'>" + pad(hours) + "</span>";
    html += "<span class='countdown-heading hours-top'>Hours</span>";

    html += "</div>";

    html += "<div class='countdown-container minutes'>"
    html += "<span class='countdown-value minutes-bottom'>" + pad(minutes) + "</span>";
    html += "<span class='countdown-heading minutes-top'>Minutes</span>";

    html += "</div>";

    html += "<div class='countdown-container seconds'>"
    html += "<span class='countdown-value seconds-bottom'>" + pad(seconds) + "</span>";
    html += "<span class='countdown-heading seconds-top'>Seconds</span>";

    html += "</div>";

    this.html(html);
  };

  $.fn.countdown = function() {
    var el = $(this);
    el.showclock();
    setInterval(function() {
      el.showclock();
    }, 1000);

  }

}(jQuery));

jQuery(document).ready(function() {
  if (jQuery(".countdown").length > 0)
    jQuery(".countdown").countdown();
});
.countdown>div {
  display: inline-block;
}

.countdown>div>span {
  display: block;
  text-align: center;
}

.countdown-container {
  margin: 0 4px;
}

.countdown-container .countdown-value {
  font-size: 26px;
  background: #5384a1;
  color: #fff text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  margin-top: 5px;
  width: 46px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="value-proposition-wrapper">
  <div class="row">
    <div class="cd-text" style="display: inline-block;">
    </div>
    <div class='countdown' data-date="2020-02-21"></div>
  </div>

马亨德拉·戈希尔(Mahendra Gohil)

您可以通过传递带有日期的时间来达到小时数。请参考下面的Jsfiddle

[https://jsfiddle.net/gohil_mahendra86/9m5gjqw4/]

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章