如何倒计时约会

Question

我想知道是否有人可以帮助我。经过几个小时在这里和网络上不知疲倦地搜索我似乎无法使用jquery找到一个简单的倒计时。我不想使用任何类型的插件只是一个简单的jquery代码来从日期倒计时。我已设法在下面找到此代码。但即使有这个代码放在我的网站上也没有出现。我从jquery.com添加了jquery文件，并添加了具有counter ID的正确div并且没有。如果有人能够解释或告诉我如何在一个采用日期格式并返回倒计时的函数中进行简单的倒计时，我将非常感谢帮助。

var end = new Date('02/19/2012 10:1 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);

Answer 1

这是正常的javascript工作正常。

<script>
var end = new Date('02/19/2012 10:1 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>

您的输出显示如下： -

1天9小时3分22秒

更新

使用函数：

<script>

    CountDownTimer('02/19/2012 10:1 AM', 'countdown');
    CountDownTimer('02/20/2012 10:1 AM', 'newcountdown');

    function CountDownTimer(dt, id)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById(id).innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById(id).innerHTML = days + 'days ';
            document.getElementById(id).innerHTML += hours + 'hrs ';
            document.getElementById(id).innerHTML += minutes + 'mins ';
            document.getElementById(id).innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
    }

</script>
<div id="countdown"></div>
<div id="newcountdown"></div>

输出显示如下： -

0days 23hrs 25mins 8secs

1天23小时25分8秒

Answer 2

那不是jQuery，那是JavaScript。但无论如何......

你几乎得到了它。唯一的问题是var distance = end-now;。它应该是：

var distance = end.getTime()-now.getTime();

此外，您不应在+=上使用innerHTML。相反，使用变量（例如：var output = ""）并添加到该变量，然后在结尾处分配给innerHTML。

最后，仔细检查div的ID是否与getElementById中的ID匹配。

Answer 3

为了这篇文章的新读者，这是我的贡献。

我使用 setTimeout 而不是 setInterval 以便我们可以在目标日期仍在倒计时时轻松更新它。我还将包括目标日的时间以获得更好的精度，并且时间将为本地时间。所以我想这涵盖了大多数可能的要求。

function refreshTimer(){
  function countDown(){
    setTimeout(function(now){
                 var dif = (td-now)/1000,
                      ss = Math.floor(dif % 60).toString().padStart(2,"0"),
                      ms = Math.floor(dif/60 % 60).toString().padStart(2,"0"),
                      hs = Math.floor(dif/3600 % 24).toString().padStart(2,"0"),
                      ds = Math.floor(dif/86400).toString().padStart(3,"0");
                  remainingTime.textContent = dif > 0 ? `${ds} Days ${hs}:${ms}:${ss}`
                                                      : "Sorry. You are already late..!";
                  active && countDown();
                  this.removeEventListener("change", kill); // possibly redundant
                }, 1000, Date.now());
  }
  var td     = new Date(this.value),
      active = true,
      kill   = _ => active = false;
  this.addEventListener("change", kill);
  countDown();
}

var targetDateTime = document.getElementById("targetDateTime"),
    remainingTime  = document.getElementById("remainingTime");

targetDateTime.addEventListener("change",refreshTimer);

<input id="targetDateTime" type="datetime-local">
<p id="remainingTime"></p>

最好将天、小时、分钟和秒放在它们自己的 <div> 或 <span> 中，以便更好地显示，在这种情况下，单独更新它们将是另一项任务。