JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<body>
    <div id="time-info">Current Time: <span id="hours"></span> : <span id="minutes"></span></span> : <span id="seconds"></span> : <span id="milliseconds">
    </div>
    
    <div id="calc-time-info">Calculated Time:<br />
        h: <span id="hours-calc"></span><br />
        m: <span id="minutes-calc"></span><br />
        s: <span id="seconds-calc"></span><br />
        scaled to 100: <span id="better-seconds"></span>
    </div>

CSS

#time-info, #calc-time-info {
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 14px;
}
#time-info span, #calc-time-info span
{
    color: gray;
}
#clock {
    max-width: 900px;
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

JavaScript

function updateTime() {
    
    var theTime = new Date();    // get current Date object for timing
    
    // display the current time in HTML so we can see it:
    var hoursSpan = document.getElementById("hours");
    var minutesSpan = document.getElementById("minutes");
    var secondsSpan = document.getElementById("seconds");
    var millisecondsSpan = document.getElementById("milliseconds");

    hoursSpan.innerHTML = theTime.getHours();
    minutesSpan.innerHTML = theTime.getMinutes();
    secondsSpan.innerHTML = theTime.getSeconds();
    millisecondsSpan.innerHTML = theTime.getMilliseconds();
    
    // theTime.getSeconds() gives a value from 0-59 (60 seconds in a minute)
    // theTime.getMilliseconds() gives a value from 0-999 (1000 milliseconds in a second)
    // theTime.getMinutes() gives a value from 0-59 (60 minutes in an hour)
    // theTime.getHours() gives a value from 0-23 (24 hours in a day)
    //

    var calcSeconds =  theTime.getSeconds() + theTime.getMilliseconds()/999;
    var calcMinutes =  theTime.getMinutes() + calcSeconds/60;
    var calcHours =  theTime.getHours() + calcMinutes/60;
    
    // display the *calculated* time in HTML so we can see it:
    var hoursCalcSpan = document.getElementById("hours-calc");
    var minutesCalcSpan = document.getElementById("minutes-calc");
    var secondsCalcSpan = document.getElementById("seconds-calc");

    hoursCalcSpan.innerHTML = calcHours;
    minutesCalcSpan.innerHTML = calcMinutes;
    secondsCalcSpan.innerHTML = calcSeconds;



    //
    // if you want it to equal 100 at maximum, try splitting it into 2 parts:
    // 100 * (theTime.getSeconds() + theTime.getMilliseconds()) / 60 
    var maxValue = 100;
    var betterSeconds = maxValue * (theTime.getSeconds() + theTime.getMilliseconds()/999) / 60;
    
    document.getElementById("better-seconds").innerHTML = betterSeconds;


}
// EDIT by Evan - was too fast
// runs the update every millisecond 
setInterval(updateTime, 40);