<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Hour: <span id="hour"></span></h1>
  <h1>Minute: <span id="minute"></span></h1>
  <h1>Seconds: <span id="second"></span></h1>
  <small class="block">An example of how time splitting in the 00:00:00 format works using the <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/split">String.Split()</a> method</small>
</body>
</html>
.block{
  padding: 5px;
  background-color: aliceblue;
}
View Compiled 
var str = "02:30:10"

// Аргумент s - строка с временем
// Возвращает массив чисел
function GetNumbers(s){
  let numbers = str.split(':');
  return numbers;
}

// Проверка метода GetNumbers
let numbers = GetNumbers(str);
document.getElementById('hour').innerHTML = numbers[0];
document.getElementById('minute').innerHTML = numbers[1];
document.getElementById('second').innerHTML = numbers[2];

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.