我在这个页面上有一个javascript倒计时：http: //omeumundoptc.comuf.com/countdown/ 在左上角。我想复制它并将其放在右侧。请注意，两个倒计时应该有不同的时间，所以它应该有不同的变量或其他东西。实现这一目标的步骤是什么？我在这里先向您的帮助表示感谢。
问问题
209 次
1 回答
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 上，您需要在 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 ：（这远未优化。通过 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;
}
于 2013-07-21T22:57:25.057 回答