如何指定jQuery Countdown的小时数

问题描述 投票:2回答:1

抱歉愚蠢的问题,但我怎样才能指定倒计时的时间?现在我可以添加日期时间属性并在那里指定日期,默认情况下需要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>
jquery html countdown
1个回答
1
投票

你可以通过时间和日期来实现工作时间。请参考下面的Jsfiddle

[https://jsfiddle.net/gohil_mahendra86/9m5gjqw4/]
© www.soinside.com 2019 - 2024. All rights reserved.