自调整Javascript倒计时

Self Adjusting Javascript Countdown

本文关键字：倒计时 Javascript 自调整      更新时间：2023-09-26

有没有一种方法可以使用javascript创建一个倒计时计时器，一旦倒计时达到0，就会自动调整到不同的倒计时？（例如：从当前时间到2012年新年的倒计时，一旦倒计时到0，它将变为3月生日的倒计时）（这可以用作活动日程的倒计时。一旦它完成倒计时到第一部分，你就可以有一个日程和下一部分的倒计时了）

var timeForNextFunction = false;
function firstFunction(){
    //set timeForNextFunction = true when its time for the next function.
};
function nextFunction(){};
var tick = 100; //milliseconds
document.setInterval(function(){
      if (timeForNextFunction)
          nextFunction();
      else
          firstFucntion();
}, tick);

您可以有一个Date数组，例如：

function newDate(seconds){
    var d=new Date();
    d.setTime(new Date().getTime()+1000*seconds);
    return d;
}
var events=[newDate(10),newDate(40)];

然后

var currentEvent=0,
    cntdwn=document.getElementById('seconds');
    refreshEvent();
var timer=setInterval(display,1000);
function display(){
    var seconds=Math.ceil((events[currentEvent].getTime()-new Date().getTime())/1000);
    if(seconds>=0){
        cntdwn.innerHTML=seconds;
    }else{
        if(currentEvent<events.length-1){
            currentEvent++;
            refreshEvent();
        }else{
            clearTimeout(timer);
            // Finished
        }
    }
}
function refreshEvent(){
    document.getElementById('currentDate').innerHTML=events[currentEvent];
}

请在此处查看：http://jsfiddle.net/epUG4/

当然，在许多倒计时中，您可以尝试jCounter并设置其回退以在另一个日期启动插件的另一个实例。

这就是你在jCounter:中的做法

$('.counterClass').jCounter({
  date: '31 december 2012 23:59:59', 
  format: 'dd:hh:mm:ss', // display days, hours, minutes and seconds, you can choose here what to display
  fallback: function() { $('.counterClass').jCounter({ // fallback for the next countdown
    date: '31 march 2013 00:00:00', 
    format: 'dd:hh:mm:ss', // format
    fallback : function() { alert("Happy Birthday!") } // second fallback
  }); }
});

请注意，jCounter依赖于服务器端时区，默认为"欧洲/伦敦"，您可以通过添加（以及其他设置）、时区："欧洲/奥斯陆"或任何您喜欢的内容来更改它。

相关文章：