elapsed time divs tracking

by Craig Martin

HTML

<div id="divs">
    <div id="1">First</div>
    <div id="2">Second</div>
    <div id="3">Third</div>
    <div id="4">Fourth</div>
</div>
<p id="output"></p>
<div id="demo"></div>

CSS

#divs {
    overflow:auto;
    cursor:default;
}
#divs div {
    float:left;
    margin:5px;
    border:1px solid gray;
    background-color:#ccc;
    width:100px;
    height:100px;
}
#divs div.selected {
    border:1px solid red;
    background-color:#faa;
}

JavaScript

var divs = $('#divs > div'),
    output = $('#output'),
    tarr = [0, 0, 0, 0],
    delay = 100;


function myFunction() {
    var idx = divs.filter('.selected').index();
    tarr[idx] = tarr[idx] + delay;
    milliSecs = +tarr[idx];

    msSecs = (1000)
    msMins = (msSecs * 60)
    msHours = (msMins * 60)
    numHours = Math.floor(milliSecs / msHours)
    numMins = Math.floor((milliSecs - (numHours * msHours)) / msMins)
    numSecs = Math.floor((milliSecs - (numHours * msHours) - (numMins * msMins)) / msSecs)

    if (numSecs < 10) {
        numSecs = "0" + numSecs
    }
    if (numMins < 10) {
        numMins = "0" + numMins
    }

    resultString = numHours + ":" + numMins + ":" + numSecs


    var marker = prompt("Marker Title: ", "");


    if (marker != null) {
        document.getElementById("demo").innerHTML =
            "<div id='result" + idx + " '>Exhibit ID " + idx + "<br>Marker Title: " + marker + "<br>Elapsed time: " + resultString + "<br></div>";

    }
}


divs.click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    var idx = divs.filter('.selected').index();
    tarr[idx] = tarr[idx] + delay;
    myFunction();
});

setInterval(function () {
    var idx = divs.filter('.selected').index();
    tarr[idx] = tarr[idx] + delay;
    output.text('Times (in ms): ' + tarr);
}, delay);