2013-10-22 23 views
0

所以我有counter.js想有一個頁面上有兩個JS倒計時

month= --month; 
dateFuture = new Date(year,month,day,hour,min,sec); 
dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2); 

function GetCount(){ 

    dateNow = new Date();                
    amount = dateFuture.getTime() - dateNow.getTime()+5;    
    delete dateNow; 

    /* time is already past */ 
    if(amount < 0){ 
      out= 
      "<div id='days'><span></span><p>0</p><div id='days_text'></div></div>" + 
      "<div id='hours'><span></span><p>0</p><div id='hours_text'></div></div>" + 
      "<div id='mins'><span></span><p>0</p><div id='mins_text'></div></div>" + 
      "<div id='secs'><span></span><p>0</p><div id='secs_text'></div></div>" ; 
      document.getElementById('countbox').innerHTML=out;  
    } 
    /* date is still good */ 
    else{ 
      days=0;hours=0;mins=0;secs=0;out=""; 

      amount = Math.floor(amount/1000); /* kill the milliseconds */ 

      days=Math.floor(amount/86400); /* days */ 
      amount=amount%86400; 

      hours=Math.floor(amount/3600); /* hours */ 
      amount=amount%3600; 

      mins=Math.floor(amount/60); /* minutes */ 
      amount=amount%60; 


      secs=Math.floor(amount); /* seconds */ 


      out= 
      "<div id='days'><span></span><p>" + days +"</p><div id='days_text'></div></div>" + 
      "<div id='hours'><span></span><p>" + hours +"</p><div id='hours_text'></div></div>" + 
      "<div id='mins'><span></span><p>" + mins +"</p><div id='mins_text'></div></div>" + 
      "<div id='secs'><span></span><p>" + secs +"</p><div id='secs_text'></div></div>" ; 
      document.getElementById('countbox').innerHTML=out; 


      setTimeout("GetCount()", 1000); 
    } 
} 

month= --month; 
dateFuture = new Date(year,month,day,hour,min,sec); 
dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2); 

function GetCount2(){ 

    dateNow = new Date();                
    amount = dateFuture2.getTime() - dateNow.getTime()+5;    
    delete dateNow; 

    /* time is already past */ 
    if(amount < 0){ 
      out= 
      "<div id='days2'><span></span><p>0</p><div id='days_text'></div></div>" + 
      "<div id='hours2'><span></span><p>0</p><div id='hours_text'></div></div>" + 
      "<div id='mins2'><span></span><p>0</p><div id='mins_text'></div></div>" + 
      "<div id='secs2'><span></span><p>0</p><div id='secs_text'></div></div>" ; 
      document.getElementById('countbox2').innerHTML=out;  
    } 
    /* date is still good */ 
    else{ 
      days=0;hours=0;mins=0;secs=0;out=""; 

      amount = Math.floor(amount/1000); /* kill the milliseconds */ 

         hours=Math.floor(amount/499600); /* hours */ 
      amount=amount%3600; 

      mins=Math.floor(amount/60); /* minutes */ 
      amount=amount%60; 


      secs=Math.floor(amount); /* seconds */ 


      out= 
      "<div id='days2'><span></span><p>" + days +"</p><div id='days_text'></div></div>" + 
      "<div id='hours2'><span></span><p>" + hours +"</p><div id='hours_text'></div></div>" + 
      "<div id='mins2'><span></span><p>" + mins +"</p><div id='mins_text'></div></div>" + 
      "<div id='secs2'><span></span><p>" + secs +"</p><div id='secs_text'></div></div>" ; 
      document.getElementById('countbox2').innerHTML=out; 


      setTimeout("GetCount2()", 1000); 
    } 
} 

window.onload=function(){GetCount(); GetCount2();} 

這個代碼,我有這個index.html的代碼給日至secific時間,在這種情況下都都是一樣的

 <!-- Enter countdown here --> 
<script type="text/javascript"> 
//Edit data below to your personal preferences ---------------------------------- 

//Give the date --------------------------------- 
year = 2015; year2 = 2015; 
month = 12; month2 = 12; 
day = 12; day2 = 12; 
//Give the point of time ------------------------ 
hour= 24; hour2 = 24; 
min= 0; min2 = 0; 
sec= 0; sec2 = 0; 
//----------------------------------------------- 

//That's it! 

,這在index.html的同時觸發計數起伏

<!-- Countdown --> 
      <div id="countdown"> 
       <div class="event-title"> 
       </div> 
       <div id="countbox"></div> 
       <div class="event-title"></div> 
      </div> 


     <div id="countdown2"> 
      <div class="event-title"> 
      </div> 
      <div id="countbox2"></div> 
      <div class="event-title"></div> 
     </div> 

倒計時在那裏,正在倒計時,但由於某種原因,第二個櫃檯沒有任何日子,它只顯示爲零,它只是顯示多少個小時,沒有人明白爲什麼我有這個問題?我經歷了一切,我顯然錯過了一些重要的東西。

謝謝你的幫助。

+0

你似乎缺少「天= Math.floor(金額/ 86400 );/* days * /「在GetCount2函數中。 –

回答

0

簡短的回答是,你缺少的幾行代碼。 具體month= --month;後,你需要month2= --month2;,並在GetCount2功能你錯過了這兩條線路:

days=Math.floor(amount/86400); /* days */ 
amount=amount%86400; 

朗答案(什麼我會建議)是使GetCount功能有點更通用的,並且只使用一個功能。 所以counter.js可能是這個樣子:

function GetCount(countdownDate, elementId){ 
    var dateNow = new Date(); 
    var amount = countdownDate.getTime() - dateNow.getTime() + 5;    
    delete dateNow; 
    var out = ""; 
    /* time is already past */ 
    if(amount < 0){ 
      out = 
      "<div id='days'><span></span><p>0</p><div id='days_text'></div></div>" + 
      "<div id='hours'><span></span><p>0</p><div id='hours_text'></div></div>" + 
      "<div id='mins'><span></span><p>0</p><div id='mins_text'></div></div>" + 
      "<div id='secs'><span></span><p>0</p><div id='secs_text'></div></div>" ; 
      document.getElementById(elementId).innerHTML=out;  
    } 
    /* date is still good */ 
    else{ 
      var days=0, hours=0, mins=0, secs=0; 

      amount = Math.floor(amount/1000); /* kill the milliseconds */ 

      days=Math.floor(amount/86400); /* days */ 
      amount=amount%86400; 

      hours=Math.floor(amount/3600); /* hours */ 
      amount=amount%3600; 

      mins=Math.floor(amount/60); /* minutes */ 
      amount=amount%60; 

      secs=Math.floor(amount); /* seconds */ 

      out= 
      "<div id='days'><span></span><p>" + days +" days</p><div id='days_text'></div></div>" + 
      "<div id='hours'><span></span><p>" + hours +" hours</p><div id='hours_text'></div></div>" + 
      "<div id='mins'><span></span><p>" + mins +" mins</p><div id='mins_text'></div></div>" + 
      "<div id='secs'><span></span><p>" + secs +" secs</p><div id='secs_text'></div></div>" ; 
      document.getElementById(elementId).innerHTML=out; 

      setTimeout(function() { GetCount(countdownDate, elementId); }, 1000); 
    } 
} 

而且你可以在網頁上,你會需要像

<script type="text/javascript"> 
    //Edit data below to your personal preferences ---------------------------------- 

    //Give the date --------------------------------- 
    var year = 2015, year2 = 2015, 
    month = 12, month2 = 12; 
    day = 12, day2 = 12, 
    //Give the point of time ------------------------ 
    hour= 24, hour2 = 24, 
    min= 0, min2 = 0, 
    sec= 0, sec2 = 0; 
    //----------------------------------------------- 

    //That's it! 

    month= --month; 
    month2= --month2; 
    dateFuture = new Date(year,month,day,hour,min,sec); 
    dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2); 

    window.onload=function(){ 
     GetCount(dateFuture, "countdown"); GetCount(dateFuture2, "countdown2"); 
    } 
</script> 
0

這個問題似乎是你在兩個函數中操作相同(全局)變量,因爲它們沒有在任何範圍內聲明。

days=0;hours=0;mins=0;secs=0;out=""; 

嘗試重命名這些以

days2=0;hours2=0;mins2=0;secs2=0;out2=""; 
相關問題