Edit in JSFiddle

var redbox = document.getElementById("redbox-04");
var running = true;
var startTime;
var run = function() {
    if(!running) return;
    requestAnimationFrame(run);
    redbox.innerHTML = (new Date().getTime() - startTime) + "ms";
}
var start = function() {
    startTime = new Date().getTime();
    running = true;
    run();
}
var stop = function() {
    running = false;
    redbox.innerHTML = "0ms";
}
var startBtn = document.getElementById("redbox-btn-03");
var stopBtn = document.getElementById("redbox-btn-04");
startBtn.addEventListener('click', start);
stopBtn.addEventListener('click', stop);

<div class="demo">
    <div class="redbox" id="redbox-04">0ms</div>
</div>
<ul class="buttons">
<li id="redbox-btn-03">Start</li>
<li id="redbox-btn-04">Stop</li>
</ul>

.demo {
    position: relative;
    width: 100%;
    min-height: 100px;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 1em 0 0 0;
}
.redbox {
    position: absolute;
    min-width: 50px;
    height: 50px;
    background-color: #f00;
    top: 25px;
    left: 25px;
    color: #fff;
    text-align: center;
    padding: 1.0em 0.8em 0 0.8em;
    font-family: monospace;
    font-size: 1.4em;
}
ul.buttons {
    list-style-type: none;
    padding: 1em 0 1em 0;
    overflow: auto;
    margin-bottom: 0.5em;
}
.buttons li {
    float: left;
    font-family: 'Droid Sans', sans-serif;
    margin: 0 1em 0.1em 0;
    background-color: #000;
    color: #fff;
    padding: 0.3em 1.8em 0.3em 1.8em;
    border-radius: 6px;
    cursor: pointer;
    font-style: normal;
    list-style-image: none;
}