增加变量

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

使用一个功能countersUpdate与局部变量msInterval和count和参数elm, INTERVAL, INCREMENT, START_VALUE

var now = new Date(); 
 
var START_DATE = new Date("January 10, 2012 22:30:00"); 
 

 
function countersUpdate(elm, INTERVAL, INCREMENT, START_VALUE) { 
 
    var msInterval = INTERVAL * 1000; 
 
    var count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
 
    elm.html(count.toFixed(0)); 
 
    window.setInterval(function() { 
 
    count += INCREMENT; 
 
    elm.html(count.toFixed(0)); 
 
    }, msInterval); 
 
} 
 

 
countersUpdate($('#div1'), 8, 6, 25); 
 
countersUpdate($('#div2'), 14, 5, 1500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

Answer 2

当你写：

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

你真正做的是加计作为窗口对象的属性所以：

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

所以，当你嵌入在同一页上这两个脚本，计数变量实际上指向两个脚本窗口对象完全相同的特性。

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

<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>