Question

您好我想使用3个不同的计数器，显示从特定日期开始的3个不同的增加数字。我试过这个：

<script>
  var START_DATE_1 = new Date("July 18, 2016 10:30:00"); // put in the starting date here
  var INTERVAL_1 = 5; // in seconds
  var INCREMENT_1 = 1; // increase per tick
  var START_VALUE_1 = 0; // initial value when it's the start date
  var count_1 = 0;

  window.onload = function()
  {
    var msInterval_1 = INTERVAL_1 * 1000;
    var now_1 = new Date();
    count_1 = parseInt((now_1 - START_DATE_1)/msInterval_1) * INCREMENT_1 + START_VALUE_1;
    document.getElementById('counter_1').innerHTML = count_1;
    setInterval("count_1 += INCREMENT_1; document.getElementById('counter_1').innerHTML = count_1;", msInterval_1);
  }
</script>

<script>
  var START_DATE_2 = new Date("July 18, 2016 10:30:00"); // put in the starting date here
  var INTERVAL_2 = 5; // in seconds
  var INCREMENT_2 = 1; // increase per tick
  var START_VALUE_2 = 0; // initial value when it's the start date
  var count_2 = 0;

  window.onload = function()
  {
    var msInterval_2 = INTERVAL_2 * 1000;
    var now_2 = new Date();
    count_2 = parseInt((now_2 - START_DATE_2)/msInterval_2) * INCREMENT_2 + START_VALUE_2;
    document.getElementById('counter_2').innerHTML = count_2;
    setInterval("count_2 += INCREMENT_2; document.getElementById('counter_2').innerHTML = count_2;", msInterval_2);
  }
</script>

<script>
  var START_DATE_3 = new Date("July 18, 2016 10:30:00"); // put in the starting date here
  var INTERVAL_3 = 5; // in seconds
  var INCREMENT_3 = 1; // increase per tick
  var START_VALUE_3 = 0; // initial value when it's the start date
  var count_3 = 0;

  window.onload = function()
  {
    var msInterval_3 = INTERVAL_3 * 1000;
    var now_3 = new Date();
    count_2 = parseInt((now_3 - START_DATE_3)/msInterval_3) * INCREMENT_3 + START_VALUE_3;
    document.getElementById('counter_3').innerHTML = count_2;
    setInterval("count_3 += INCREMENT_3; document.getElementById('counter_3').innerHTML = count_3;", msInterval_3);
  }
</script>

<div id="counter_1"></div>
<div id="counter_2"></div>
<div id="counter_3"></div>

这不能按预期工作，只有3td div已填充，但现在也按预期工作（一旦我加载页面，它会显示一个数字，然后从1开始几秒后重启）。

怎么了？如果不使用JQuery，我该怎么办呢？

提前致谢。

Answer 1

我不进行代码分析 - 这对于SE-CodeReview来说是强烈建议的（强烈建议在你工作之后也在那里发布），但是你的错误是，你正在为一个函数分配一些东西而不是一次 - 因此，只有最后一个作业实际上被称为onload。

所以 - 您在第一个window.onload = function()标记中指定了<script>，然后您在第二个标记中覆盖;并且您在第三个<script>标记中再次覆盖第二个作业。

如果要将所有3个功能分配到单个（onload）事件，则无法执行此操作。

如果要为单个事件添加多个侦听器，请使用

document.addEventListener("DOMContentLoaded", function() {});

现在，在该功能中，您可以添加要执行页面onload的所有代码;除了你想在另一个函数中执行onload的代码之外！

这是一个简单的演示，使用与上述相同的技术，但使用点击监听器。请注意，永远不会调用第一个函数。

document.getElementById("a").onclick = function() {
  alert("I will never alert, because of the next function");
}
document.getElementById("a").onclick = function() {
  alert("I will alert, because I'm not overriden");
}

document.getElementById("a").addEventListener('click', function() {
  alert("I will alert too");
});

document.getElementById("a").addEventListener('click', function() {
  alert("And a third alert. Disturbing");
});

<div id="a">Click me!</div>

从日期开始增加变量Javascript

1 个答案: