0

我一直在尝试使用 javascript 和 jquery 创建一个数字计数器。我想要 2 个计数器，其中一个依赖于另一个。我希望计数器从 0-2000 递增，递增间隔为 100 毫秒。并且每当一个计数器达到 200 的倍数（num=200 或 num=400 或 num=600...）时，另一个计数器加一。预期的结果是在相同的时间内从 0-2000 开始一个计数器，另一个从 0-10 开始。

这是我未能得到结果的代码片段：

html代码：

<span id="counter" >0</span>
<span id="counter2" >0</span>

javascript代码：

function counting(){
     var cc=0;
     for(var c=0;c<2000;c++){
        if((c % 200) === 0){
         $('#counter2').text(cc+1);
        }
        else{
         setTimeout(function(){$('#counter').text(c);},100);           
        }  
     }
}

请帮助我解决任何 javascript 或 jquery 解决方案..

4

2 回答 2

1

setInterval在这里更适合使用。此外，您应该递增并将cc其1存储在cc自身中。

function counting() {
  var cc = 0,
    c = 1;

  var int = setInterval(function() {
    $('#counter').text(c);

    if (c % 200 === 0) {
      cc += 1;
      $('#counter2').text(cc);
    }

    if (c >= 2000) {
      clearInterval(int);
    }

    c += 1;
  }, 1);
}

counting();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="counter">0</span>
<span id="counter2">0</span>

我已将此演示的时间间隔修改为 1 毫秒。您可以根据自己的要求进行更改。

于 2018-05-04T05:46:13.227 回答
0

最好setInterval与区间函数内的条件一起使用，clearInterval最后是 a。不需要 jQuery：

const counter = document.querySelector('#counter');
const counter2 = document.querySelector('#counter2');

let count = 0;
const interval = setInterval(() => {
  count++;
  counter.textContent = count;
  if (count % 200 === 0) counter2.textContent = count / 200;
  if (count === 2000) clearInterval(interval);
}, 100);
<span id="counter" >0</span>
<span id="counter2" >0</span>

加速版：

const counter = document.querySelector('#counter');
const counter2 = document.querySelector('#counter2');

let count = 0;
const interval = setInterval(() => {
  count++;
  counter.textContent = count;
  if (count % 200 === 0) counter2.textContent = count / 200;
  if (count === 2000) clearInterval(interval);
}, 10);
<span id="counter" >0</span>
<span id="counter2" >0</span>

于 2018-05-04T05:44:05.337 回答