JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://stevenlevithan.com/assets/misc/date.format.js"></script>
<div><strong>Fraction of time:</strong></div>
<input id='fraction' type="text" value="12.5" /> (hit enter to update)
<div id="result"></div>
CSS
* {
font-size: 1em;
}
strong {
font-weight: bold;
}
div {
margin: 10px 0;
}
JavaScript
$('#fraction').keyup(update);
function update(event) {
if(event.keyCode != 13 /* enter */) {
return;
}
$("#result").text(formatTime(this.value));
}
function formatTime(fraction) {
var seconds = fraction * 3600;
var date = new Date(2000, 1, 1);
date.setUTCSeconds(seconds);
return date.format("HH:MM:ss");
}