Question

您好我正在婚礼网站上工作，其中我有一个婚礼数据倒计时，但我不知道如何设置倒计时显示正确倒数的日期。

这是代码：

      <div class="row">
        <div class="col-md-6 col-md-push-3">
          <ul class="countdown mt-xs-30" >
            <li> <span id="days-sub">days</span>
              <input class="knob" data-fgcolor="#fff" data-fillcolor="rgba(255,255,255,0.3)"  data-height="140" data-max="366" data-min="0" data-readonly="true" data-skin="tron"
                                    data-thickness="0.1" data-width="140" id="days">
            </li>
            <li> <span id="hours-sub">hours</span>
              <input class="knob" data-fgcolor="#fff" data-fillcolor="rgba(255,255,255,0.3)" data-height="140" data-max="24" data-min="0" data-readonly="true" data-skin="tron"
                                    data-thickness="0.1" data-width="140" id="hours">
            </li>
            <li> <span id="mins-sub">minutes</span>
              <input class="knob" data-fgcolor="#fff" data-fillcolor="rgba(255,255,255,0.3)" data-height="140" data-max="60" data-min="0" data-readonly="true" data-skin="tron" data-thickness="0.1" data-width="140" id="mins">
            </li>
            <li> <span id="secs-sub">seconds</span>
              <input class="knob" data-fgcolor="#fff" data-fillcolor="rgba(255,255,255,0.3)" data-height="140" data-max="60" data-min="0" data-readonly="true" data-skin="tron" data-thickness="0.1" data-width="140" id="secs">
            </li>
          </ul>
          <!-- launch countdown end --> 
        </div>
      </div>

Answer 1

试试这可能会帮助你......

  function happywedding_countdown() {
$(".countdown").countdown({
  date: "29 January 2016 00:00:00", // countdown target date settings
  format: "on"
  }, function() {
  });}

Answer 2

愿它能帮到你。：）

var time = 10;
var initialOffset = '440';
var i = 1
var interval = setInterval(function() {
    $('.circle_animation').css('stroke-dashoffset', initialOffset-(i*(initialOffset/time)));
    $('h2').text(i);
    if (i == time) {
        clearInterval(interval);
    }
    i++;  
}, 1000);

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item html">
    <h2>0</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

Answer 3

我建议使用 JQuery 插件，只需将样式应用于此代码并完成。

您可以使用最佳且合适的代码 JQ 。我使用keith wood countdown plugin来完成它。

你需要设置排序代码，例如我想显示即将到来的新年计时器的倒计时：

<强> JQUERY ：

$(function () {
    var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
    $('#defaultCountdown').countdown({until: austDay});
    $('#year').text(austDay.getFullYear());
});

<强> HTML ：

<p>Counting down to 26 January <span id="year">2014</span>.</p>
<div id="defaultCountdown"></div>

倒计时会有效。有关更多详细信息，您可以使用here中的多个示例查看演示。

<强>参考：
1. GitHub
2. jQuery Countdown

希望这有帮助！

如何在HTML5中设置日期范围？

3 个答案: