Javascript 需要帮助运行多个倒计时计时器吗

我试图在一个页面上有多个倒计时计时器，但遇到了一些问题，其中一个倒计时计时器无法加载。我试着改变变量，但还是一无所获。请帮助D：

<!-- Countdown Timer 1 -->


<p>
<script type="text/javascript" language="JavaScript">// <![CDATA[
dateFuture = new Date(2014,11,8,9,0,0);

function GetCount(){

        dateNow = new Date();                                                                      
        amount = dateFuture.getTime() - dateNow.getTime();
        delete dateNow;


        if(amount < 0){
                document.getElementById('countbox').innerHTML="This pre-order has ended";
        }

        else{
                days=0;hours=0;mins=0;secs=0;out="";

                amount = Math.floor(amount/1000);

                days=Math.floor(amount/86400);
                amount=amount%86400;

                hours=Math.floor(amount/3600);
                amount=amount%3600;

                mins=Math.floor(amount/60);
                amount=amount%60;

                secs=Math.floor(amount);

                if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
                if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
                if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
                out += secs +" seconds" + " left to order";
                document.getElementById('countbox').innerHTML=out;

                setTimeout("GetCount()", 1000);
        }
}

window.onload=function(){GetCount();}
// ]]></script>
</p>
<div id="countbox" style="background-color: #b20a14; border-radius: 10px; padding: 15px; color: #fff; font-size: 2em; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: center;">&nbsp;</div>



<!-- Countdown timer 2 -->




<p>
<script type="text/javascript" language="JavaScript">// <![CDATA[
dateFuture2 = new Date2(2014,11,9,9,0,0);

function GetCount2(){

        dateNow2 = new Date2();                                                                      
        amount2 = dateFuture2.getTime() - dateNow2.getTime();
        delete dateNow2;


        if(amount2 < 0){
                document.getElementById('countbox2').innerHTML="This pre-order has ended";
        }

        else{
                days2=0;hours2=0;mins2=0;secs2=0;out2="";

                amount2 = Math.floor(amount2/1000);

                days2=Math.floor(amount2/86400);
                amount2=amount2%86400;

                hours2=Math.floor(amount2/3600);
                amount2=amount2%3600;

                mins2=Math.floor(amount2/60);
                amount2=amount2%60;

                secs2=Math.floor(amount2);

                if(days2 != 0){out2 += days2 +" day"+((days2!=1)?"s":"")+", ";}
                if(days2 != 0 || hours2 != 0){out2 += hours2 +" hour"+((hours2!=1)?"s":"")+", ";}
                if(days2 != 0 || hours2 != 0 || mins2 != 0){out2 += mins2 +" minute"+((mins2!=1)?"s":"")+", ";}
                out2 += secs2 +" seconds" + " left to order";
                document.getElementById('countbox2').innerHTML=out2;

                setTimeout("GetCount2()", 1000);
        }
}

window.onload=function(){GetCount2();}
// ]]></script>
</p>
<div id="countbox2" style="background-color: #b20a14; border-radius: 10px; padding: 15px; color: #fff; font-size: 2em; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: center;">&nbsp;</div>

// 


// 

您正在定义

窗口。onload

，将只执行最后一次赋值，即将

函数（）{GetCount2（）；}

赋值给它将替换先前的

函数（）{GetCount（）；}

相反，使用

window.onload = function() { GetCount(); GetCount2(); }

或

---

另外，正如iblamefish和LcLk所指出的那样，

newdate2

很可能是

newdate（）

有两个问题导致它无法运行

首先，在第58行和第62行，您有

Date2

-这应该是

newdate（）

其次，只能将一个函数分配给window.onload。你应该使用更现代的设备

document.addEventListener("load", function() { GetCount1(); }, false);
// or without the extra wrapping function 
document.addEventListener("load", GetCount1, false);

您可以通过注意GetCount1和GetCount2几乎完全相同，并创建一个更多的函数来为您创建计时器，从而改进代码。这可以替换代码示例中的所有脚本

function getCounter(endingDate, element) {
  return (function counter() {
    var dateNow = new Date(),
      amount = endingDate.getTime() - dateNow.getTime();

    if (amount < 0) {
      element.innerHTML="This pre-order has ended";
    } else {
      var days = 0,
        hours = 0,
        mins = 0,
        secs = 0,
        out = 0;

      amount = Math.floor(amount/1000);

      days=Math.floor(amount/86400);
      amount=amount%86400;

      hours=Math.floor(amount/3600);
      amount=amount%3600;

      mins=Math.floor(amount/60);
      amount=amount%60;

      secs=Math.floor(amount);

      if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
      if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
      if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
      out += secs +" seconds" + " left to order";
      element.innerHTML=out;
    }
    setTimeout(counter, 1000);
  })();
}

// you can create a new timer with the getCounter function - e.g.
// getCounter (new Date(2014,11,8,9,0,0), document.getElementById("element_id"))

document.addEventListener("load", getCounter(new Date(2014,11,8,9,0,0), document.getElementById("countbox")), false);

document.addEventListener("load", getCounter(new Date(2014,11,9,9,0,0), document.getElementById("countbox2")), false);

函数getCounter（endingDate，元素）{ 返回（函数计数器（）{ var dateNow=新日期（）， amount=endingDate.getTime（）-dateNow.getTime（）； 如果（金额<0）{ element.innerHTML=“此预订单已结束”； }否则{ var天数=0， 小时=0， 分钟=0， 秒=0， out=0； 金额=数学下限（金额/1000）； 天数=数学下限（金额/86400）； 金额=金额%86400； 小时数=数学下限（金额/3600）； 金额=金额%3600； 分钟=数学下限（金额/60）； 金额=金额%60； 秒=数学下限（金额）； 如果（天！=0）{out+=days+“day”+（（天！=1）？“s”：“）+”，“；} 如果（天！=0 | |小时！=0）{out+=hours+“hour”+（（hours！=1）？“s”：“）+”，“；} 如果（天！=0 | | |小时！=0 | | | | | | | | | | | | | | | | | | | | | | 124 输出+=秒+“秒”+“按顺序剩余”； element.innerHTML=out； } 设置超时（计数器，1000）； })(); } //您可以使用getCounter函数创建一个新计时器-例如。 //getCounter（新日期（2014,11,8,9,0,0），document.getElementById（“元素id”）） document.addEventListener（“加载”）、getCounter（新日期（2014,11,8,9,0,0）、document.getElementById（“countbox”）、false； document.addEventListener（“加载”）、getCounter（新日期（2014,11,9,9,0,0）、document.getElementById（“countbox2”）、false；

---

这远远不能重复使用

我做了一些更改，以便您能够使用相同的功能

这里需要注意的重要一点是，我们将日期传递给函数，而不是全局名称空间。此外，必须匿名调用timeout函数，以便我们可以重复传递date参数

我在函数中添加了第二个参数，允许您选择要按ID显示倒计时的元素

最后（可能也是最重要的）函数中的变量前面加了

var

。为什么？因为如果在函数内外都有相同的变量名，那么可能会导致其他代码出现问题。我们使用

var

告诉我们的函数，“请只在这里工作。”

现在，您可以创建任意数量的倒计时时钟。但是一定要看看这些变化，看看这是如何改进编码的

date1=新日期（2014,11,8,9,0,0）；
日期2=新日期（2014年12月8日9日0日）；
GetCount（日期1，“countbox”）；
GetCount（日期2，'countbox2'）；
函数GetCount（dateFuture，targetID）{
var dateNow=新日期（）；
var amount=dateFuture.getTime（）-dateNow.getTime（）；
删除dateNow；
如果（金额<0）{
document.getElementById（'countbox'）.innerHTML=“此预订单已结束”；
}否则{
var天数=0，
小时=0，
分钟=0，
秒=0，
out=“”；
金额=数学下限（金额/1000）；
天数=数学下限（金额/86400）；
金额=金额%86400；
小时数=数学下限（金额/3600）；
金额=金额%3600；
分钟=数学下限（金额/60）；
金额=金额%60；
秒=数学下限（金额）；
如果（天！=0）{
out+=days+“day”+（（days！=1）？“s”：“）+”和“；
}
如果（天！=0 | |小时！=0）{
out+=hours+“hours”+（（hours！=1）？“s”：“）+”和“；
}
如果（天！=0小时！=0分钟！=0）{
out+=min+“min”+（（min！=1）？“s”：“）+”，“；
}
输出+=秒+“秒”+“按顺序剩余”；
document.getElementById（targetID）.innerHTML=out；
setTimeout（函数（）{
GetCount（dateFuture，targetID）；
}, 1000);
}
}

div{
边界半径：10px；
填充：15px；
颜色：#fff；
字号：2em；
字体系列：Arial、Helvetica、无衬线字体；
文本转换：大写；
文本对齐：居中；
}
#计数箱{
背景色：#b20a14；
}
#countbox2{
背景色：#006；
}

---

new Date2（）

，你有没有为Date2定义过原型/类？有人能解释为什么投票失败吗？这个答案怎么了s

function getCounter(endingDate, element) {
  return (function counter() {
    var dateNow = new Date(),
      amount = endingDate.getTime() - dateNow.getTime();

    if (amount < 0) {
      element.innerHTML="This pre-order has ended";
    } else {
      var days = 0,
        hours = 0,
        mins = 0,
        secs = 0,
        out = 0;

      amount = Math.floor(amount/1000);

      days=Math.floor(amount/86400);
      amount=amount%86400;

      hours=Math.floor(amount/3600);
      amount=amount%3600;

      mins=Math.floor(amount/60);
      amount=amount%60;

      secs=Math.floor(amount);

      if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
      if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
      if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
      out += secs +" seconds" + " left to order";
      element.innerHTML=out;
    }
    setTimeout(counter, 1000);
  })();
}

// you can create a new timer with the getCounter function - e.g.
// getCounter (new Date(2014,11,8,9,0,0), document.getElementById("element_id"))

document.addEventListener("load", getCounter(new Date(2014,11,8,9,0,0), document.getElementById("countbox")), false);

document.addEventListener("load", getCounter(new Date(2014,11,9,9,0,0), document.getElementById("countbox2")), false);