从日期开始增加变量Javascript

Increment variable Javascript since a date

本文关键字：变量 Javascript 增加 开始 日期      更新时间：2023-09-26

你好，我想使用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>

这并没有像预期的那样工作，只有3tddiv被填充，但现在也像预期的那样工作(只要我加载页面，它就会显示一个数字，然后几秒钟后从1重新启动)。

怎么了?我应该怎么做，而不使用JQuery也?

我不做代码分析-这将是SE-CodeReview的东西(强烈建议在那里发布，一旦你得到它的工作)，但你的错误是，你分配的东西给一个函数不止一次-因此，只有最后一个分配实际上被称为onload。

所以——你在你的第一个<script>标签分配window.onload = function()，然后你是重写它在你的第二个;并且您在第三个<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>

相关文章：