重複的Javascript倒計時

Question

我在這個頁面有一個javascript倒計時： http://omeumundoptc.comuf.com/countdown/ 在左上角。 我想複製它並將其放置在右側。 請注意，這兩個倒計時應該有不同的時間，所以它應該有不同的變量或東西。 要做到這一點，將採取哪些步驟？ 感謝您的幫助提前。

Answer 1

首先，你需要把這個網站在相同的位置，其他櫃檯：

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

其添加到styles.css中：

#countdown2 { 
    position: absolute; 
    left: 688px; 
    top: 290px; 
    width: 244px; 
    height: 86px; 
    line-height: 150%; 
    color: #e0d1aa; 
} 

#countdown2 .event-title { 
    position: absolute; 
    left: 6px; 
    top: 75px; 
    width: 227px; 
    text-align: center; 
    font-family: 'Fjalla One', sans-serif; 
    font-size: 13px; 
    line-height: 125%; 
    text-transform: uppercase; 
    color: #000; 
} 

#countdown2 .days, 
#countdown2 .hours, 
#countdown2 .minutes, 
#countdown2 .seconds, 
#countdown2 .hundredths { 
    position: absolute; 
    top: 9px; 
    width: 40px; 
    font-size: 23px; 
    font-family: 'Monda', sans-serif; 
    text-align: center; 
} 

#countdown2 .days { 
    left: 14px; 
} 

#countdown2 .hours { 
    left: 71px; 
} 

#countdown2 .minutes { 
    left: 126px; 
} 

#countdown2 .seconds { 
    left: 181px; 
} 

#countdown2 .hundredths { 
    font-size: 12px; 
    text-align: left; 
    top: 5px; 
    left: 218px; 
} 

在您需要添加raffle.htm在JavaScript部分的第二次約會如下所示：

//Edit data below to your personal preferences ---------------------------------- 

//Give the date --------------------------------- 
year = 2013; year2 = 2013; 
month = 9; month2 = 10; 
day = 30; day2 = 30; 
//Give the point of time ------------------------ 
hour= 24; hour2 = 24; 
min= 0; min2 = 0; 
sec= 0; sec = 0; 
//----------------------------------------------- 

您需要修改counter.js s :(這遠遠不夠優化。有通過jQuery這樣做的更好的方法）

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); 
     } 
} 

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('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='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();} 

添加這counter.css：

#countbox2 { 
    color: #FFFFFF; 
    font-family: Myriad Pro,Helvetica,sans-serif; 
    font-size: 32px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 0; 
} 
#days2 { 
    background-image: url("../images/countdown/flip.png"); 
    background-repeat: no-repeat; 
    float: left; 
    height: 42px; 
    margin: 0 7px; 
    text-align: center; 
    width: 44px; 
    z-index: 1; 
} 
#days_text2 { 
    background-image: url("../images/countdown/days_text.jpg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    height: 26px; 
    margin-top: 10px; 
    position: absolute; 
    width: 44px; 
} 
#hours2 { 
    background-image: url("../images/countdown/flip.png"); 
    background-repeat: no-repeat; 
    float: left; 
    height: 42px; 
    margin: 0 7px; 
    text-align: center; 
    width: 44px; 
    z-index: 1; 
} 
#hours_text2 { 
    background-image: url("../images/countdown/hours_text.jpg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    height: 26px; 
    margin-top: 10px; 
    position: absolute; 
    width: 44px; 
} 
#mins2 { 
    background-image: url("../images/countdown/flip.png"); 
    background-repeat: no-repeat; 
    float: left; 
    height: 42px; 
    margin: 0 7px; 
    text-align: center; 
    width: 44px; 
    z-index: 1; 
} 
#mins_text { 
    background-image: url("../images/countdown/mins_text.jpg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    height: 26px; 
    margin-left: -5px; 
    margin-top: 10px; 
    position: absolute; 
    width: 54px; 
} 
#secs2 { 
    background-image: url("../images/countdown/flip.png"); 
    background-repeat: no-repeat; 
    float: left; 
    height: 42px; 
    margin: 0 7px; 
    text-align: center; 
    width: 44px; 
    z-index: 1; 
} 
#secs_text { 
    background-image: url("../images/countdown/secs_text.jpg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    height: 26px; 
    margin-top: 10px; 
    position: absolute; 
    width: 54px; 
} 
#days2 p, #hours2 p, #mins2 p, #secs2 p { 
    margin-top: 8px; 
}