同一页面上的多个Javascript倒计时
嗨,我正在尝试向一个html页面添加几个javascript倒计时。我在下面包含了.js文件。现在我的页面只显示第一次倒计时同一页面上的多个Javascript倒计时,javascript,countdown,Javascript,Countdown,嗨,我正在尝试向一个html页面添加几个javascript倒计时。我在下面包含了.js文件。现在我的页面只显示第一次倒计时 function cdtd () { var end = new Date("December 25, 2013 00:01:00"); var start = new Date(); var timeDiff = end.getTime() - start.getTime(); if (timeDiff <= 0) {
function cdtd () {
var end = new Date("December 25, 2013 00:01:00");
var start = new Date();
var timeDiff = end.getTime() - start.getTime();
if (timeDiff <= 0) {
clearTimeout (timer);
document.write("Deal Ended");
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %=60;
document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secsBox").innerHTML = seconds;
var timer = setTimeout('cdtd()',1000);
}
function countdown () {
var end = new Date("May 31, 2013 00:01:00");
var start = new Date();
var timeDiff = end.getTime() - start.getTime();
if (timeDiff <= 0) {
clearTimeout (timer);
document.write("Deal Ended");
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %=60;
document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secsBox").innerHTML = seconds;
var timer = setTimeout('countdown()',1000);
}
function cdtd3 () {
var end = new Date("December 25, 2013 00:01:00");
var start = new Date();
var timeDiff = end.getTime() - start.getTime();
if (timeDiff <= 0) {
clearTimeout (timer);
document.write("Deal Ended");
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %=60;
document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secsBox").innerHTML = seconds;
var timer = setTimeout('cdtd3()',1000);
}
function cdtd4 () {
var end = new Date("December 25, 2013 00:01:00");
var start = new Date();
var timeDiff = end.getTime() - start.getTime();
if (timeDiff <= 0) {
clearTimeout (timer);
document.write("Deal Ended");
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %=60;
document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secsBox").innerHTML = seconds;
var timer = setTimeout('cdtd4()',1000);
}
function cdtd5 () {
var end = new Date("December 25, 2013 00:01:00");
var start = new Date();
var timeDiff = end.getTime() - start.getTime();
if (timeDiff <= 0) {
clearTimeout (timer);
document.write("Deal Ended");
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %=60;
document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secsBox").innerHTML = seconds;
var timer = setTimeout('cdtd5()',1000);
}
function cdtd6 () {
var end = new Date("December 25, 2013 00:01:00");
var start = new Date();
var timeDiff = end.getTime() - start.getTime();
if (timeDiff <= 0) {
clearTimeout (timer);
document.write("Deal Ended");
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %=60;
document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secsBox").innerHTML = seconds;
var timer = setTimeout('cdtd6()',1000);
}
函数cdtd(){
var结束=新日期(“2013年12月25日00:01:00”);
var start=新日期();
var timeDiff=end.getTime()-start.getTime();
如果(timeDiff现在您每次调用函数时都引用一个框覆盖每个值
您希望使用查询选择器而不是getElementById
下面是一个使用jQuery的简单示例:
var cdtd = function(id,end) {
var start = new Date();
var timeDiff = end.getTime() - start.getTime();
if (timeDiff <= 0) {
clearTimeout (timer);
document.write("Deal Ended");
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
$( id + " .days").html(days);
$( id + " .hours").html(hours);
$( id + " .minutes").html( minutes);
$( id + " .seconds").html( seconds );
console.log(id + " .hoursBox",$( id + " .hoursBox").length,id,end,hours,minutes,seconds)
var timer = setTimeout(function(){cdtd(id,end)},1000);
}
cdtd("#counter1",new Date("December 25, 2014 00:01:00"));
cdtd("#counter2",new Date("October 31, 2014 00:01:00"));
cdtd("#counter3",new Date("January 1, 2014 00:01:00"));
var cdtd=函数(id,end){
var start=新日期();
var timeDiff=end.getTime()-start.getTime();
如果(timeDiff这里有几个问题需要解决:
每个倒计时计时器在存储时间字符串时使用相同的元素ID。这就是为什么只显示其中一个
如果任何一个倒计时达到零,则调用document.write()
将擦除整个页面
代码被重复了一遍又一遍。这应该是所有倒计时的一个常用函数。(如果需要再添加一个呢?再添加十个?)
虽然多个计时器可以工作,但您不需要它们。运行一个计时器并从中更新所有显示的时间
调用setInterval()
时,最好将函数引用作为第一个参数而不是字符串传递
考虑一下这些想法,看看你能想出什么,然后用你的新代码向我们汇报。:-)@Shanimal我在我的网站上使用了这个代码,问题是当计时器达到0000时,它会转到另一个页面并显示交易结束。我想要的是,当计时器达到0000时,它必须在同一页面的特定分区上显示消息。它不应该转到另一个页面。我已尝试删除它
如果(timeDiff),您可能希望熟悉面向对象编程的概念:有一点是肯定的,…您的所有函数都使用相同的ID更新元素。