сосчитать время указанное в атрибуте html

#javascript

Есть такая структура html:



const timeNodes = Array.from(document.querySelectorAll('[data-time]'));




  
  



  

    

      Video 1
    
    

      Video 2
    
    

      Video 3
    
    

      Video 4
    








помогите посчитать или подскажите как узнать продолжительность всех видео. Их длительность
указана в аттрибуте data-time=""
    

Ответы

Ответ 1

Пара функций, первая считает число секунд, вторая форматирует секунды.



// Суммируем результаты обработки отдельных строк с помощью reduce
const secs = list => list.reduce((sum, str) => {
  // разбиваем строку по двоеточиям, относимся к результату, как к числу в 60-ричной
системе
  let parts = str.split(':');
  // Складываем 60-ричные разряды
  let q = 1;
  while (parts.length) {
    sum += q * parts.pop();
    q *= 60;
  }
  return sum;
}, 0);

// Обратная операция, перевод числа секунд в 60-ричный вид.
const fmt = secs => {
  let parts = []; // позиции
  while (secs > 0) {
    parts.unshift(secs % 60); // вдвигаем позицию слева
    secs = secs/60 |0; // целочисленное деление
  }
  return parts.map(d => d<10?'0'+d:''+d) // Добавляем ведущие нули
     .join(':');
}

let list = ['1:00:00', '12:55', '00:07'];
let sum = secs(list);
let time = fmt(sum);

console.info(sum, time)


Ответ 2

На чистом js


var videos = document.getElementsByClassName('videos')[0].children;
sumHour = 0;
sumMinute = 0;
sum = "00:00";
for(var i = 0; i < videos.length; i++) {
   var clock = videos[i].getAttribute('data-time').split(':');
   sumHour += parseInt(clock[0]);
   sumMinute+=parseInt(clock[1]);
}
sum = (sumHour + parseInt(sumMinute/60)) + ":" + (sumMinute%60);
console.log(sum);

    

      Video 1
    
    

      Video 2
    
    

      Video 3
    
    

      Video 4
    



Ответ 3

Конечно, после варианта @vp_arth это будет тем ещё велосипедом, но вдруг кому-то
так будет проще разобраться в механике перевода часов в секунды и обратно (например мне).



const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
let seconds = 0, time;

timeNodes.forEach(function(item) { // проделываем операцию с каждым элементом массива
  time = item.dataset.time.split(':').map(Number); // берём из элемента массива значение
data-time и формируем массив, попутно приводя тип к числу
  
  if (time[time.length-3]) seconds += time[time.length-3]*3600; // если в атрибуте
data-time были часы, то переводим их в секунды и добавляем к переменной seconds
  
  seconds += time[time.length-1] + time[time.length-2]*60; // таким же образом переводим
минуты в секунды и добавляем секунды к seconds
});

var output = function normalizeSeconds(seconds) {
  var result = [];
  
  if (seconds >= 3600 ) { // если секунд достаточно для формирования часов
    var h = Math.floor(seconds / 3600); // получаем к-во часов делением на 3600 и
отсекаем дробную часть
    result.push(h); // записываем в массив
    
    var m = Math.floor( (seconds % 3600) / 60 ); // получаем остаток от часов в секундах,
получаем к-во минут, отсекаем дробную часть
    result.push(m);
    
    var s = (seconds % 3600) % 60;
    result.push(s);
  } else {// если секунд не достаточно для формирования часов
    var m = Math.floor(seconds / 60); // получаем минуты, отсекая дробную часть от
деления на 60
    result.push(m); // получаем секунды, остаток от деления на 60
    
    var s = seconds % 60;
    result.push(s);
  }
  
  return result.join(':'); // соединяем массив в строку через двоеточие
}

console.log(output(seconds));

  

    Video 1
  
  

    Video 2
  
  

    Video 3
  
  

    Video 4