增加变量
我正在尝试使用下面的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>
他们是为了显示基于设定值不同的输出,但它们显示相同的值
我会很高兴和例子充分说明。
使用一个功能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>
它没有工作,它只是增加总数INCREMENT + INCREMENT2 = 11,它挑选11并添加到两个输出 – user3476168
@ user3476168重构代码,照顾局部变量 – user2314737
当你写:
<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>
它不起作用,仍然添加相同价值div1和div2 – user3476168
这将是因为你正在以相同的时间间隔增加两个计数器相同的金额。并不是说他们仍然与之前共享相同的变量。这可以通过将所有不想在全局范围内共享的var定义纳入ready函数的范围来解决。这样他们将在该功能本地化。 – atomless
因为您正在重写由两个单独的定时功能共享的全局变量。 – Terry
@ user3476168使用'setTimeout(func,ms,counter);' –
看起来很多不必要的全局变量。使用本地变量和功能。 – lshettyl