time display options - imagepuzzle

by bobbyrne01

HTML

<input type="text" id="time1"><br/>
<input type="text" id="time2"><br/>
<input type="text" id="time3"><br/>
<input type="text" id="time4"><br/>
<input type="text" id="time5"><br/>
<input type="text" id="time6"><br/>
<input type="text" id="time7"><br/>
first index of milliseconds are only shown<br/>
high cpu usage seen when trying to update faster then every 100 milliseconds

CSS

input{
    width:100%;
}

JavaScript

setInterval(getTime, 150);

function getTime() {

    var timeTakenString = "",
        newTime = new Date(),
        hours = newTime.getHours(),
        minutes = newTime.getMinutes(),
        seconds = newTime.getSeconds(),

        tenth = newTime.getMilliseconds().toString()[0],
        hundredth = newTime.getMilliseconds().toString()[0] + newTime.getMilliseconds().toString()[1];

    if (hours > 0) timeTakenString += hours.toString() + " hour(s), ";

    if (minutes > 0) timeTakenString += minutes.toString() + " minute(s), ";

    if (seconds > 0) timeTakenString += seconds.toString() + " second(s)";

    document.getElementById('time1').value = hours + ":" + minutes + ":" + seconds;
    document.getElementById('time2').value = hours + "h:" + minutes + "m:" + seconds + "s";

    document.getElementById('time3').value = hours + ":" + minutes + ":" + seconds + "." + tenth;
    document.getElementById('time4').value = hours + ":" + minutes + ":" + seconds + "." + hundredth;
    document.getElementById('time5').value = hours + "h:" + minutes + "m:" + seconds + "s." + tenth + "ds";
    document.getElementById('time6').value = hours + "h:" + minutes + "m:" + seconds + "s." + hundredth + "cs";

    document.getElementById('time7').value = timeTakenString;
}