javascript - 如何在倒计时达到 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。

我已经使用“分钟”进行了测试，看看日期是否在不刷新浏览器的情况下更新，但事实并非如此。

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

那么我该如何改变它才能工作呢？我需要在倒计时达到 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 的时间检查该日期的时间(这是今天的时间)。如果 date 的小时数大于或等于 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 上。这是为了告诉计时器倒计时何时完成，将倒计时更新为零，然后重新开始倒计时。

任何人有任何疑问，请随时询问。