javascript - 循环遍历类，获取类文本值，相加并输出到 div

Question

我有

var val = document.getElementByClassName('duration').text();
var temp = val.split(":");
var total = 0;
var v;
for (var i = 0; i < temp.length; i++) {
    v = parseFloat(temp[i]);
    if (!isNaN(v)) total += v;
    totalmins = parseInt(total / 60);
    totalsecs = parseInt(total % 60);
    total = totalmins + ":" + totalsecs;
}
document.getElementById("total-time").innerHTML = total;

对于 html

<ol id="songs">
    <li class="title"><a href="#" data-src="music/barryNice3.mp3">You don't really love me <span class="duration">3:50</span></a></li>
    <li class="title"><a href="#" data-src="music/newjam.mp3">So done with you <span class="duration">4:23</span></a></li>
    <li class="title"><a href="#" data-src="">I actually still love you<span class="duration">3:57</span></a></li>
    <li class="title"><a href="#" data-src="">Call me back please <span class="duration">4:08</span></a></li>
    <li class="title"><a href="#" data-src="">Bye baby bye <span class="duration">3:15</span></a></li>
    <li class="title"><a href="#" data-src="">We together <span class="duration">3:46</span></a></li>
    <li class="title"><a href="#" data-src="">Together Forever <span class="duration">4:05</span></a></li>
</ol>

我需要做的是获取持续时间的值并将它们加在一起，然后将该数字输出到 div。我完全是个菜鸟，我被困住了。

Answer 1

在您的代码中:

> var val = document.getElementByClassName('duration').text();

您寻求的方法是getElementsByClassName (注意复数 Elements)，它返回一个实时 NodeList ，它没有 text 方法。

在这种情况下，最好使用 querySelectorAll，因为 IE 8 支持该功能，但 getElementsByClassName 不支持，因此:

var elements = document.querySelectorAll('.duration');

现在循环元素并获取文本:

var text;
for (var i=0, ilen=elements.length; i<iLen; i++) {
  text = elements[i].textContent || elements[i].innerText;

  // do stuff with text

}  

请注意，W3C textContent旧版 IE 中支持属性为 innerText。

总结时间(我猜是 mm:ss)，你可以这样做:

var b, text, totalTime;
var total = 0;
var elements = document.querySelectorAll('.duration');

// Pad single digit with leading zero
function z(n){return (n<10? '0' : '') + n}

for (var i=0, iLen=elements.length; i<iLen; i++) {
  text = elements[i].textContent || elements[i].innerText;
  b = text.split(':');
  total += b[0]*60 + +b[1];
}
totalTime = (total/60 | 0) + ':' + z(total%60); // 27:24