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

修改<span>文本取决于类名JAVASCRIPT - NO jQUERY

1 个答案: