根据类名修改<span/>文本 JAVASCRIPT - NO jQUERY

Question

我想做的是编写一个函数，该函数将迭代所有不同的html元素，这些元素的类名以rnum-开头，后跟一个数字。跨度的完整示例是 <span class="rnum-293"></span> .

然后，我想实现我在下面编写的函数，并让它对每个给定的数字（在类名中指定）执行递增效果。

有谁知道我如何实现这一目标？谢谢！

var count = 0;
var target = 126;
var increment = target / 198;
var elements = document.getElementsByClassName('rnum');
function calc() {
  if(count < target) {
    count += increment;
  }
  for(var i = 0; i < elements.length; i++) {
   elements[i].innerHTML = Math.round(count);
  }
}
setInterval(calc, 10)

@import url('https://fonts.googleapis.com/css?family=Bangers');
body {
  font-family: 'Bangers';
  display: flex;
  align-items: center;
  justify-content: center;
}
.rnum {
  font-size: 55px;
  margin: 50px;
}

<span class="rnum"></span>
<span class="rnum"></span>
<span class="rnum"></span>

Answer 1

要选择元素，请使用：

var elements = document.querySelectorAll('[class^="rnum-"]');

或者，如果只是 span 元素，请使用：

var elements = document.querySelectorAll('span[class^="rnum-"]');

我不确定你问题的第二部分。就我所看到的，唯一的问题是选择元素。

对于第二部分：

JavaScript：

    var elements = document.querySelectorAll('span[class^="rnum-"]');
function calc() {
    var el = null;
    var val = 0;
    var currentValue = 0;
    var incrementFactor = 198;
    var increment = 0;
    var maxValue = 0;
    for (var i = 0, len = elements.length; i < len; i++) {
        el = elements[i];
        maxValue = Number(el.getAttribute('data-max-val'));
        currentValue = Number(el.getAttribute('data-current-val'));
        increment = maxValue / incrementFactor;
        if ((currentValue + increment) > maxValue)
            continue;
        val = currentValue + increment;
        el.innerHTML = Math.round(val);
        el.setAttribute('data-current-val', Math.round(val));
    }
}
setInterval(calc, 10)

.HTML：

<span class="rnum-198000" data-current-val="0" data-max-val="198000">0</span>
<span class="rnum-299000" data-current-val="0" data-max-val="299000">0</span>
<span class="rnum-399000" data-current-val="0" data-max-val="399000">0</span>
<span class="rnum-499000" data-current-val="0" data-max-val="499000">0</span>

笔： http://codepen.io/anon/pen/rjyqMd?editors=1111