关于如何重构和改善此Javascript倒计时的任何想法？ [长码]

Question

倒计时如下显示时间&最小值& SEC。例子48小时12MIN 02 SECONDS。

1. 我试图修改它，以便它显示2Days 0Hours 12Min 02Seconds，但是当我这样做代码中断。

2. 另一个问题我有是，一旦倒计时已近尾声，它显示为00 00 00

附：代码可能看起来很长，但其中大部分都是可变的，我将它们包括在内以防止混淆。

好玩：

function countdown(yr,m,d,hr,min,sec,id_d,url,gettimezone){ 

// Here I skipped some Variable assigments. That help define futurestring andd todaystring. 

    //Main Variable assignments START 
var dd=futurestring-todaystring; 
    // futurstring - todaystring are self-explanatory, the future date - todays date.  
var dday=Math.floor(dd/(60*60*1000*24)*1); 

var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1); 

dday = (dday*24)+dhour; //converted days to hour 

var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1); 

var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1); 
    //Main Variable assignments END 

    //Here is where it really starts. 

    if(dday<=0&&dmin<=0&&dsec<=0) //I believe this is causing issue 2, this should be displaying the 00s if the countdown is over. 
    { 
     document.getElementById(id_de+'tot_hrs2').innerHTML='00'; 
     document.getElementById(id_de+'tot_mins2').innerHTML='00'; 
     document.getElementById(id_d+'tot_secs2').innerHTML='00'; 
     setTimeout("redirect_url_fn('"+url+"')",2000); 

    } 
    else 
    { 
     if(dday<10) 
     { 
      dday='0'+dday; 
     } 
     if(dmin<10) 
     { 
      dmin='0'+dmin; 
     } 
     if(dsec<10) 
     { 
      dsec='0'+dsec; 
     } 


        //Tried replacing dday with dhour & adding dday while 

        //Removing dday = (dday*24)+dhour; //converted days to hour 

        //But I don't get the correct countdown time in D-H-M-S format 

     document.getElementById(id_de+'tot_hrs2').innerHTML=dday; 

     document.getElementById(id_de+'tot_mins2').innerHTML=dmin; 

     document.getElementById(id_d+'tot_secs2').innerHTML=dsec; 

     setTimeout("countdown('"+year+"','"+month+"','"+day+"','"+hour+"','"+minute+"','"+second+"','"+id_de+"','"+url+"','"+tz+"')",1000); 
     //setTimeout("cou("+id_d+")",1000); 
     //setTimeout("redirect_url_fn('"+url+"')",2000); 
        if(dday<=0) // dday zero allowed here 
      { 
      document.getElementById(id_de+'tot_hrs2').innerHTML=''; 
       document.getElementById('hrs').innerHTML='';      
      }  

    } 

} 

Answer 1

考虑您关心的是当前的日期和您传递给countdown日期之间的差异。实际的日期对象不是必需的 - 当然日期字符串不是。你可以凝结在该日期字串，解析和减法下来两条线：（假设gettimezone是UTC的时间EST将是-5，例如。）

var future = Date.UTC(year, month, day, hour, min, sec) - (gettimezone * 1000 * 60 * 60); 
var ms_til_then = future - Date.now(); 

现在

，如为您的代码：

function countdown(yr,m,d,hr,min,sec,id_de,url,tz){ 
    // You had 3 sets of vars that were all equal and meant the exact same thing. 
    // Those are now gone. 

    // i hate repetitive math with a thug passion. 
    // use these instead of 1000*60*60*24 and whatever all over the place. 
    var MS_PER_SEC = 1000, 
     MS_PER_MIN = MS_PER_SEC * 60, 
     MS_PER_HOUR = MS_PER_MIN * 60, 
     MS_PER_DAY = MS_PER_HOUR * 24; 

    // The two lines i mentioned above 
    var future_time = Date.UTC(yr, m-1, d, hr, min, sec) - (tz * MS_PER_HOUR); 
    var dd = future_time - Date.now(); 

    // The dhour, dmin, dsec etc stuff can wait a bit 

    // Here, we care if the "future time" is past the current time, right? 
    // We already have a number that represents the difference between the two. 
    // If dd <= 0, then the time has passed. 
    if(dd <= 0) 
    { 
     // Note, we're doing the same thing with the elements as we would if dd==0. 
     // Let's not repeat ourselves; the only major difference between the two is 
     // what we set for the callback and when it happens. 
     // So here, let's let dd=0 and let both branches do the same thing with the 
     // date elements. 
     dd = 0; 
     // Remind me to smack whoever taught you this was right. 
     // setTimeout("redirect_url_fn('"+url+"')",2000); 
     // Instead, we specify the function directly, saving parsing and avoiding the 
     // dirty looks we get when we eval stuff. 
     // Note we can pass params to the function; we just put them after the timeout. 
     setTimeout(redirect_url_fn, 2000, url); 
    } 
    else 
    { 
     // Again...no need to compose a string to call ourselves again. 
     // If we wanted to get fancy, we could wrap most of the meat of this function 
     // up in a closure, and call it, and not have to keep passing all these params. 
     // But that's spiff for another time. 
     setTimeout(countdown, 1000, yr, m, d, hr, min, sec, id_de, url, tz); 
    } 

    // Moving all this closer to where it's used. 
    var dday=Math.floor(dd/MS_PER_DAY); 
    var dhour=Math.floor((dd%MS_PER_DAY)/MS_PER_HOUR); 
    // math time: if a and b are positive, and a is divisible by b, then ((n%a)%b)==n%b 
    // Meaning: We can simplify this crap. 
    var dmin=Math.floor((dd % MS_PER_HOUR)/MS_PER_MIN); 
    var dsec=Math.floor((dd % MS_PER_MIN)/MS_PER_SEC); 
    // I had to fix this; it was bugging me. When you have a variable named 
    // dDAY that contains HOURS, your variable names are lying to you. 
    dhour = (dday*24)+dhour; // Converting days+hours to just hours 

    if(dhour<10) 
    { 
     dhour='0'+dhour; 
    } 
    if(dmin<10) 
    { 
     dmin='0'+dmin; 
    } 
    if(dsec<10) 
    { 
     dsec='0'+dsec; 
    } 

    document.getElementById(id_de+'tot_hrs2').innerHTML=dhour; 
    document.getElementById(id_de+'tot_mins2').innerHTML=dmin; 
    document.getElementById(id_de+'tot_secs2').innerHTML=dsec; 

    // Don't need <= here; if we're in this part of the code, dhour is not negative 
    if(dhour==0) 
    { 
     // hide hours and label 
     document.getElementById(id_de+'tot_hrs2').innerHTML=''; 
     document.getElementById('hrs').innerHTML=''; 
    } 
} 

// for example, to count down to new years... 
countdown(2012, 1, 1, 0, 0, 0, '', 'http://happynewyear.com', -5); 

我还建议countdown采取Date对象，而不是一堆的日期部分。但现在，我已经完成了一些改变。

好吧，现在它可读，让我们看看这些问题。

如果你想显示日子，那么你需要摆脱dhour = (dday * 24) + dhour;这条线。这将几天+几小时转换为几小时。您还需要添加一行来设置元素的内容，就像使用小时，分钟和秒钟一样。

另外，请参阅那一节开始的那一段if (dhour == 0) ...？这需要消失或更改为dday（并且代码需要更改以设置日期元素而不是小时）。

糟糕！看起来像我可能会不小心固定的第二个问题已：P