我在这个页面有一个javascript倒计时: http://omeumundoptc.comuf.com/countdown/ 在左上角。 我想复制它并将其放置在右侧。 请注意,这两个倒计时应该有不同的时间,所以它应该有不同的变量或东西。 要做到这一点,将采取哪些步骤? 感谢您的帮助提前。重复的Javascript倒计时
1
A
回答
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;
}
相关问题
- 1. 重复的倒计时
- 2. 倒数计时器重复?
- 3. 倒计时如何重复?
- 4. 倒计时Javascript
- 5. 修复倒计时倒数计时器
- 6. 的Javascript:倒计时
- 7. 用鼠标重置的javascript倒计时
- 8. 如何使倒数计时器重复
- 9. Javascript,jquery倒计时
- 10. 倒计时javascript app
- 11. 倒计时在Javascript
- 12. 在javascript中重置倒计时
- 13. 午夜重置javascript倒计时
- 14. Javascript倒数计时器不会重置
- 15. 的JavaScript/jQuery的倒计时
- 16. JavaScript每周五重复倒计时到中午
- 17. 使用javascript的倒计时
- 18. 简单的JavaScript倒计时
- 19. 的Javascript循环倒计时
- 20. 的Javascript倒计时&IE
- 21. 的Javascript倒计时毛刺
- 22. 问题的JavaScript倒计时
- 23. JavaScript的倒计时程序
- 24. JavaScript的jQuery倒计时计时器
- 25. javascript倒计时时钟
- 26. Javascript倒计时和时区
- 27. jQuery的倒计时重启倒计时任何按钮
- 28. 倒计时计时器javascript分钟
- 29. JavaScript运输计时器倒计时
- 30. JavaScript倒计时循环
所以你想创建你的iframe的顶部或原始页面上的另一个柜台? – ObieMD5
是的,在原始页面上。 – Alex
我删除了地址的评论。您必须查看counter.js,因为它搜索id计数框。更多地看待它并给出答案 – ObieMD5