<b>Seconds to time string (hh:mm:ss)</b>
<form style="padding-top: 1rem;">
  <label for="seconds">Seconds: </label>
  <input id="seconds" type="number" step="1" min="0" max="999999" value="245" onkeyup="updateTimeString(this.value);" />
  <br>
  <br>
  <label for="time_string">Time string: </label>
  <input id="time_string" type="text" maxlength="8" minlength="8" value="00:04:05" disabled />
</form>
<hr>
<b>Time string (hh:mm:ss) to seconds</b>
<form style="padding-top: 1rem;">
  <label for="time_string_2">Time string: </label>
  <input id="time_string_2" type="text" maxlength="8" minlength="8" value="00:01:50" onkeyup="updateSeconds(this.value);" />
  <br>
  <br>
  <label for="seconds_2">Seconds: </label>
  <input id="seconds_2" type="number" step="1" min="0" max="999999" value="110" disabled />
</form>
//https://stackoverflow.com/a/1322771
function secondsToTimeString(seconds) {
  return new Date(seconds * 1000).toISOString().substr(11, 8);
}

//https://stackoverflow.com/a/9640384
function timeStringToSeconds(time_string) {
  let arr = time_string.split(":");
  return +arr[0] * 60 * 60 + +arr[1] * 60 + +arr[2];
}

function updateTimeString(val) {
  document.getElementById("time_string").value = secondsToTimeString(val);
}

function updateSeconds(val) {
  document.getElementById("seconds_2").value = timeStringToSeconds(val);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.