尝试在一个页面上有两个JS倒计时
Trying to have two JS countdowns on one page
所以我有这个代码.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();}
我在索引中有这段代码.html以将日期提供给秒时间，在这种情况下，两者都是相同的
<!-- 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!
这将触发索引中的两个倒计时.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>
在那里并且正在倒计时，但由于某种原因，第二个计数器没有任何日期，它只是显示为零，它只显示多少小时，有人明白为什么我会遇到这个问题吗？我已经经历了一切，我显然错过了一些重要的东西。
感谢您的任何帮助。
简短的回答是你缺少几行代码。特别是在month= --month;之后，您需要month2= --month2;并且在GetCount2函数中您错过了这两行：
days=Math.floor(amount/86400); /* days */
amount=amount%86400;
长答案（也是我建议的）是使GetCount函数更通用一些，只使用一个函数。所以计数器.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>
问题似乎是您在两个函数中操作相同的（全局）变量，因为它们未在任何范围内声明。
days=0;hours=0;mins=0;secs=0;out="";
尝试将它们重命名为
days2=0;hours2=0;mins2=0;secs2=0;out2="";
相关文章：
- JQuery合并了keyup和focusout两个函数
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 单击时切换两个图像
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 基于两个条件退出While循环
- 如何在这里将两个值最低的数字相加
- 组合两个javascript函数
- 如何使用offer/answer交换来自两个对等连接的流
- jsf中两个字符串的颜色代码差异
- 加载两个具有相同父密钥名称的json文件
- 在Qualtrics中，介绍如何动态连接两个滑块
- 访问$.ajax(）函数中的两个不同数组
- 如何在three.js上添加两个向量
- 倒计时计时器应该持续两个php页面
- 如何制作两个倒计时计时器，如果一个开始，另一个会停止
- 尝试在一个页面上有两个JS倒计时
- 使用 jquery 的两个日期时间之间的倒计时
- 我如何使Javascript倒计时可以执行两个或更多在一个页面
