javascript - 增加变量

Question

我正在尝试使用下面的 JavaScript 来显示设定时间范围内的数字增量。我遇到的问题是，我尝试在两种不同的情况下使用它们，并发送不同的值，但它们通过显示相同的值而相互冲突。我怎样才能在不同的情况下使用它们而不互相冲突。请参阅下面的代码:

<script>
var START_DATE = new Date("January 10, 2012 22:30:00"); // put in the starting date here
var INTERVAL = 8; // refresh interval in seconds
var INCREMENT = 6;  // increase per tick
var START_VALUE = 25; // initial value when it's the start date
var count = 0;
$(document).ready(function() {
 var msInterval = INTERVAL * 1000;
 var now = new Date();
 count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
 $('#div1').html(count.toFixed(0));
 window.setInterval( function(){
    count += INCREMENT; 
    $('#div1').html(count.toFixed(0));
 }, msInterval);
});
</script>
<div id="div1"></div>

<script>
var START_DATE = new Date("January 10, 2012 22:30:00"); // put in the starting date here
var INTERVAL = 14; // refresh interval in seconds
var INCREMENT = 5;  // increase per tick
var START_VALUE = 15000; // initial value when it's the start date
var count = 0;
$(document).ready(function() {
 var msInterval = INTERVAL * 1000;
 var now = new Date();
 count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
 $('#div2').html(count.toFixed(0));
 window.setInterval( function(){
    count += INCREMENT; 
    $('#div2').html(count.toFixed(0));
 }, msInterval);
});
</script>
<div id="div2"></div>

它们旨在根据设置值显示不同的输出，但它们显示相同的值

我将非常感谢带有示例的完整解释。

Answer 1

当你写下:

<script>
   var count = 0;
</script>

您真正要做的是将计数添加为窗口对象的属性，如下所示:

<script>
   var window.count = 0;
</script>

因此，当您将这两个脚本嵌入到同一页面时，count 变量实际上指向两个脚本中 window 对象的完全相同的属性。

您可以设置自己的具有两个计数器属性的计数器对象。就像这样:

<script>

    var START_DATE = new Date("January 10, 2012 22:30:00"); // put in the starting date here
    var INTERVAL = 8; // refresh interval in seconds
    var INCREMENT = 6;  // increase per tick
    var START_VALUE = 25; // initial value when it's the start date
    var countersObj = {};
    countersObj.counter1 = 0;

    $(document).ready(function() {

      var msInterval = INTERVAL * 1000;
      var now = new Date();

      countersObj.counter1 = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
      $('#div1').html(countersObj.counter1.toFixed(0));

      window.setInterval(function() {

        countersObj.counter1 += INCREMENT; 
        $('#div1').html(countersObj.counter1.toFixed(0));
      }, msInterval);

    });

</script>
<div id="div1"></div>

<script>

    var START_DATE = new Date("January 10, 2012 22:30:00"); // put in the starting date here
    var INTERVAL = 14; // refresh interval in seconds
    var INCREMENT = 5;  // increase per tick
    var START_VALUE = 15000; // initial value when it's the start date

    $(document).ready(function() {

      var msInterval = INTERVAL * 1000;
      var now = new Date();

      countersObj.counter2 = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
      $('#div2').html(countersObj.counter2.toFixed(0));

      window.setInterval(function() {

        countersObj.counter2 += INCREMENT; 
        $('#div2').html(countersObj.counter2.toFixed(0));
      }, msInterval);
    });

</script>
<div id="div2"></div>