как указать часы для jQuery Countdown - PullRequest
Новая
       61

как указать часы для jQuery Countdown

0 голосов
/ 18 февраля 2019

Извините за глупый вопрос, но как я могу указать время для этого обратного отсчета?Теперь я могу добавить атрибут даты и времени и указать там дату, по умолчанию это 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>

1 Ответ

0 голосов
/ 18 февраля 2019

Вы можете достичь часов, передав время с датой.Пожалуйста, обратитесь ниже Jsfiddle 

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