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

How to update Date when countdown reached 0 without refreshing browser

本文关键字：倒计时 日期 更新 情况下 刷新 浏览器      更新时间：2023-09-26

我正在尝试在不刷新浏览器的情况下更新倒计时达到 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 组小时。

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

。

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

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

仅供参考，如果倒计时达到 0 或达到 1600（下午 4 点），则小时等于 16，则日期将 +1。因此，当它到达下午 4 点时，日期应该增加 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 秒处停止，然后重新启动倒计时。这有点奇怪，可能看起来不对，因为通常人们会在倒计时中看到所有零。所以你也必须把它放在完成倒计时上。这是为了告诉计时器倒计时何时完成，将倒计时更新为零，然后重新启动倒计时。

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

相关文章：