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或达到我想要的时间时更新日期。没有浏览器刷新。

FYI，如果倒计时达到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上。这是在倒计时结束时告诉计时器，将倒计时更新为零，然后重新开始倒计时。

任何人都有任何疑问，请随时提出。

如何在倒数达到0时更新日期而不刷新浏览器

1 个答案: