Есть такая структура html:
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Videos</title>
</head>
<body>
<ul class="videos">
<li data-time="5:43">
Video 1
</li>
<li data-time="2:33">
Video 2
</li>
<li data-time="3:45">
Video 3
</li>
<li data-time="0:47">
Video 4
</li>
</ul>
</body>
</html>
помогите посчитать или подскажите как узнать продолжительность всех видео. Их длительность указана в аттрибуте data-time=""
На чистом 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);
<ul class="videos">
<li data-time="5:43">
Video 1
</li>
<li data-time="2:33">
Video 2
</li>
<li data-time="3:45">
Video 3
</li>
<li data-time="0:47">
Video 4
</li>
</ul>
Пара функций, первая считает число секунд, вторая форматирует секунды.
// Суммируем результаты обработки отдельных строк с помощью 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)
Конечно, после варианта @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));
<ul class="videos">
<li data-time="5:43">
Video 1
</li>
<li data-time="2:33">
Video 2
</li>
<li data-time="3:45">
Video 3
</li>
<li data-time="1:00:47">
Video 4
</li>
</ul>
Как развивать веб-проекты в 2026 году: технологии, контент E-E-A-T и факторы доверия
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники