<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.