Question

我试图在一个页面上设置多个倒计时器，但遇到了其中一个倒数计时器无法加载的问题。我试图改变变量，但仍然没有。请帮助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>

Answer 1

这远非可重复使用。

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

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

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

最后（也可能是最重要的）函数中的变量以var为前缀。为什么？因为如果函数内部和外部具有相同的变量名称，那么它可能会导致其他代码出现问题。我们使用var来告诉我们的功能，＆＃34;请在这里工作。＆＃34;

现在，您可以根据需要创建尽可能多的倒计时时钟。但是，请尝试查看更改，看看它如何改善您的编码。

＆＃13;

date1 = new Date(2014, 11, 8, 9, 0, 0);
date2 = new Date(2014, 12, 8, 9, 0, 0);
GetCount(date1, 'countbox');
GetCount(date2, 'countbox2');

function GetCount(dateFuture, targetID) {
  var dateNow = new Date();
  var amount = dateFuture.getTime() - dateNow.getTime();
  delete dateNow;

  if (amount < 0) {
    document.getElementById('countbox').innerHTML = "This pre-order has ended";
  } else {
    var 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(targetID).innerHTML = out;

    setTimeout(function() {
      GetCount(dateFuture, targetID);
    }, 1000);
  }
}

＆＃13;

div {
  border-radius: 10px;
  padding: 15px;
  color: #fff;
  font-size: 2em;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-align: center;
}
#countbox {
  background-color: #b20a14;
}
#countbox2 {
  background-color: #006;
}

＆＃13;

<div id="countbox" style="">&nbsp;</div>

<div id="countbox2" style=";">&nbsp;</div>

＆＃13;

Answer 2

有两个问题导致此操作无法运行

首先，在第58和62行，您有Date2 - 这应该是new Date()

其次，您只能为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);

Answer 3

您重新定义window.onload，只会执行最后一次分配，即为其分配function() { GetCount2(); }会替换之前的function() { GetCount(); }。

相反，请使用

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

或者

document.addEventListener("load", GetCount, false);
// ... more code
document.addEventListener("load", GetCount2, false);

此外，正如iblamefish和LcLk指出的那样，new Date2最有可能是new Date()

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

3 个答案: