倒计时达到0时如何在不刷新浏览器的情况下更新日期

Question

我正在尝试在不刷新浏览器的情况下在倒计时达到 0 时更新日期。

这是代码

var tdy = new Date();
var nxt = new Date();
var dd = new Date();

tdy.setHours(16,00,0,0);
nxt.setHours(16,00,0,0);

var month = new Array();
month[0] = "Jan";
month[1] = "Feb";
month[2] = "Mar";
month[3] = "Apr";
month[4] = "May";
month[5] = "Jun";
month[6] = "Jul";
month[7] = "Aug";
month[8] = "Sep";
month[9] = "Oct";
month[10] = "Nov";
month[11] = "Dec";
var mth = month[dd.getMonth()];

function doCountDown() {

    if(tdy <= nxt){ 
        nxt.setDate(nxt.getDate()+1);
        dd.setDate(dd.getDate()+3);

        if(dd.getHours() == 16){
            dd.setDate(dd.getDate()+1);
        }
    }

    $('#clock').countdown(nxt).on('update.countdown', function(event){

       $('#delivered-date').text(dd.getDate()+' '+mth+' '+dd.getFullYear());

        $(this).text(event.strftime('%H hr %M min %S sec'));

    })
    .on('finish.countdown', function(event){
        setTimeout(doCountDown, 1000);
    });
}

$(document).ready(function () {
    doCountDown();
});

这是 jsfiddle，http://jsfiddle.net/2dot1geo/1/

要测试日期是否更新，只需将 dd.getHours 更改为 dd.getMinutes 并更改 var tdy 和 var nxt 的 2 个 setHours。

我已经使用 Minutes 进行了测试，以查看日期是否在不刷新浏览器的情况下更新，但它没有。

只有在我刷新浏览器后，日期才会更新。

那么我怎样才能改变它来工作呢？我需要更新倒计时达到 0 或达到我想要的时间的日期。没有浏览器刷新。

仅供参考， 如果倒计时达到 0 或达到 1600（下午 4 点），如果小时等于 16，则日期将 +1。因此，当它到达下午 4 点时，日期应该增加 1 天而不刷新浏览器。

Answer 1

我终于自己解决了这个问题。随意参考这个供您自己使用。

这是我自己的答案。

Javascript：

    function spellMonth(mth){
    var month = new Array();
month[0] = "Jan";
month[1] = "Feb";
month[2] = "Mar";
month[3] = "Apr";
month[4] = "May";
month[5] = "Jun";
month[6] = "Jul";
month[7] = "Aug";
month[8] = "Sep";
month[9] = "Oct";
month[10] = "Nov";
month[11] = "Dec";
var m = month[mth];
    return m;
}

function doCountDown(){
    var nxt = new Date();
    nxt.setHours(nxt.getHours()<16?16:40,00,0,0);
    //nxt.setHours(21,57,0,0);

    var dd = new Date();
    dd.setDate(dd.getDate()+2);

    if(dd.getHours()>=nxt.getHours()){
    //if(dd.getMinutes()>=nxt.getMinutes()){
        dd.setDate(dd.getDate()+1);
    }
    else{
        dd.setDate(dd.getDate());
    }

    $('#date').html(dd.getDate()+' '+spellMonth(dd.getMonth())+' '+dd.getFullYear());

    return nxt;
}

$('#clock').countdown(doCountDown()).on('update.countdown', function(event){
    $(this).html(event.strftime('%H hr %M min %S sec'));
})
.on('finish.countdown', function(event){
   $(this).html(event.strftime('%H hr %M min %S sec'));
   $(this).countdown(doCountDown(), function(event){
      $(this).html(event.strftime('%H hr %M min %S sec'));        
   });
});

HTML：

<div id="clock"></div>
<div id="date"></div>

JSFiddle - http://jsfiddle.net/archampion/s4q1orwr/2/

如您所见，代码有些相似。但我没有将倒计时放在 doCountDown 函数中，而是将 doCountDown 作为日期和时间返回并将其作为倒计时。

在 doCountDown() 中，我创建了一个新日期 nxt，以检查今天的小时数是否小于 16（即下午 4 点），小时数设置为 16，否则设置为 40（即第二天下午 4 点，16 小时 + 24 小时 = 40 小时）。由于我想倒计时 24 小时，这就是我的计算方式，所以我返回 nxt 作为倒计时。

另外，我想向人们展示一个日期。最初，日期将显示今天的日期 +2。然后我检查这个日期的时间（这是今天的时间）和 nxt 的时间。如果日期的小时数大于或等于 nxt 的小时数（设置为 1600 小时），我再增加一天，否则保持不变。

供您参考，我使用的 jquery 倒计时来自 http://hilios.github.io/jQuery.countdown/

所以你看到了这条线，

$(this).html(event.strftime('%H hr %M min %S sec'));

同时在 update.countdown 和 finish.countdown 上。

如果您只是将它放在 update.countdown 上，计时器将在 1 秒处停止，然后重新开始倒计时。这有点奇怪，可能看起来不正确，因为通常人们会在倒计时中看到全零。所以你也必须把它放在finish.countdown 上。它告诉计时器何时完成倒计时，将倒计时更新为零，然后重新开始倒计时。

大家有什么疑问，欢迎提问。