增加变量

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>

你真正在做的是将count作为window对象的属性添加，如下所示：

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

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

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

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

Answer 2

将一个函数SELECT Place_id, MAX(case when days= 'Mon;Tue;Wed;Thu;Fri;' then hours end) As 'Mon-Fri', MAX(case when days= 'Sat;' then hours end) As 'Sat', MAX(case when days= 'Sun;' then hours end) As 'Sun' FROM CRdata.time GROUP BY Place_id 与局部变量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);