如何倒计时到约会

IT技术 javascript

2021-01-28 00:15:05

我想知道是否有人可以帮助我。经过数小时不知疲倦地在这里和网络上搜索，我似乎无法使用 jquery 找到一个简单的倒计时。我不想使用任何类型的插件只是一个简单的 jquery 代码来从日期倒计时。我设法在下面找到了这个代码。但即使将此代码放在我的网站上，也没有任何显示。我从 jquery.com 添加了 jquery 文件，并添加了带有counterID的正确 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);

3个回答

这作为普通的 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 放在<script>标签下，将<div>放在外面。

2021-03-19 00:15:05

谢谢。如果我能打扰你一件事。你能告诉我如何把它变成一个函数，以便我可以同时运行 2 个计数器吗？

2021-03-21 00:15:05

@Siva - 你能告诉我你问过的同样的问题吗，动态日期。你在这里给出硬编码日期，我想要动态日期，倒计时应该重置并在每天早上 11 点开始

2021-03-25 00:15:05

@Khushbu_sipl：您正在寻找与发布的问题不同的答案。请打开一个新问题，并展示您到目前为止所做的尝试以更好地帮助您。

2021-03-30 00:15:05

@HungryDB 这样您就可以停止计时器并清理资源，我相信

2021-04-09 00:15:05

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

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

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

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

最后，仔细检查divID 是否与您在getElementById.

@Kolink 是的，这似乎不是很好的代码。你知道有什么地方可以找到 jquery 解决方案吗？

2021-03-16 00:15:05

在哪里结束和现在有日期，然后end - now和end.getTime() - now.getTime()将产生相同的结果，因为-将强制日期以数反正。

2021-03-23 00:15:05

我真的开始讨厌人们将 javascript 称为 jQuery 的趋势......就像人们认为在 jquery 出现之前你不能用 js 做任何事情。

2021-04-09 00:15:05

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

我使用的是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 中，以便更好地显示，在这种情况下，单独更新它们将是另一项任务。

其它你可能感兴趣的问题

上一篇获取：拒绝Promise并在状态不正常时捕获错误？下一篇如何在原型上定义 setter/getter