修改<span/>文本取決於類名JAVASCRIPT - NO jQUERY

我想要做的是編寫一個函數，它將遍歷所有不同的HTML元素，其類名以rnum-開頭，後面跟着一個數字。一個範圍的完整示例將是<span class="rnum-293"></span>。修改<span/>文本取決於類名JAVASCRIPT - NO jQUERY

然後，我想要實現我寫下面的函數，並使它對每個給定數字（在類名中指定）的影響逐漸增大。

有沒有人有一個想法，我可以做到這一點？謝謝！

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>

來源

2017-01-20 Apswak

http://stackoverflow.com/questions/6195373/regular -expression-to-get-class-name-with-specific-substring – Banzay

你可以使用[querySelector]（ht tps：//developer.mozilla.org/en-US/docs/Web/API/Document/querySelector）選擇用'rnum'開頭的東西 - 例如'querySelector（'class^= rnum - '）' – Pete

@皮特'querySelector（）'只返回匹配的第一個元素。 ['querySelectorAll（）']（https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll） – Andreas

要選擇元素，使用：

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

來源

2017-01-20 14:55:19 bini

感謝幫助的人，我到了那裏。它似乎顯示了第一個數字，然後不更新，你知道爲什麼嗎？ http://codepen.io/apswak/pen/BpWmYV?editors=0001 – Apswak

因爲它總是從類中獲取值並且該值沒有被更新。就個人而言，我會使用數據屬性來存儲最後一個值。 – bini

可以使用一些優化，但你有這樣的想法：http://codepen.io/anon/pen/rjyqMd?editors=1111 – bini

修改<span/>文本取決於類名JAVASCRIPT - NO jQUERY

回答

相關問題