Duplicate Javascript обратный отсчет

Question

У меня есть обратный отсчет javascript на этой странице: http://omeumundoptc.comuf.com/countdown/ в верхнем левом центре. Я хочу дублировать его и поместить его в нужную сторону. Обратите внимание, что оба отсчета должны иметь разное время, поэтому у него должны быть разные переменные или что-то еще. Какими были бы шаги для достижения этого? Спасибо за помощь заранее.

Answer 1

Прежде всего, необходимо поставить этот HTML в том же месте, другой счетчик:

<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 вам нужно добавить в вашей второй дате в яваскрипте секции, как так:

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