【问题标题】：how to countdown to a date如何倒计时到日期
【发布时间】：2021-05-21 16:47:46
【问题描述】：

我想知道是否有人可以帮助我。经过几个小时在这里和网络上不知疲倦地搜索后，我似乎无法找到使用 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);

【问题讨论】：

您的 DIV 需要 id“倒计时”，而不是“计数器”。
@Gregor 这是一个打字错误它的“计数器”
你能用动态日期告诉我你问的同样的问题吗？你在这里给出硬编码日期，我想要动态日期

标签： javascript

【解决方案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>

输出将如下所示：-

0 天 23 小时 25 分钟 8 秒

1 天 23 小时 25 分钟 8 秒

【讨论】：

@bammab：没有变化，我做到了。只需将 javascript 放在标记和 下作为外部..
谢谢。如果我能用一件事打扰你。你能告诉我如何把它变成一个函数，以便我可以同时运行 2 个计数器吗？
@HungryDB 这样你就可以停止计时器并清理资源，我相信
@Siva - 你能用动态日期告诉我你问的同样的问题吗？你在这里给出硬编码日期，我想要动态日期，倒计时应该重置并在每天早上 11 点开始
@Khushbu_sipl：您正在寻找与发布的问题不同的答案。请打开一个新问题并展示您迄今为止所做的尝试以更好地帮助您。

【解决方案2】：

那不是 jQuery，那是 JavaScript。不过不管怎样……

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

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

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

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

【讨论】：

我真的开始讨厌人们将 javascript 称为 jQuery 的趋势......就像人们认为在 jquery 出现之前你无法用 js 做任何事情。
@Kolink 是的，这似乎不是很好的代码。你知道有什么地方可以找到 jquery 解决方案吗？
其中 end 和 now 是日期，那么 end - now 和 end.getTime() - now.getTime() 将产生相同的结果，因为 - 将强制日期无论如何都要编号。

【解决方案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>s 或 <span>s 中包含天、小时、分钟和秒，以便更好地显示，在这种情况下单独更新它们将是另一项任务。

【讨论】：