Edit in JSFiddle

var redbox = document.getElementById("redbox-05");
var startTime, duration;
var run = function() {
    var time = (new Date().getTime() - startTime) / duration;
    redbox.innerHTML = time.toPrecision(4).substring(0, 6);
    if(time < 1) requestAnimationFrame(run);
    else stop();
}
var start = function() {
    duration = input.value;
    startTime = new Date().getTime();
    run();
}
var stop = function() {
    redbox.innerHTML = "1.0000";
}
var startBtn = document.getElementById("redbox-btn-05");
var input = document.getElementById("redbox-input-01");
startBtn.addEventListener('click', start);

<div class="demo">
    <div class="redbox" id="redbox-05">1.0000</div>
</div>
<div class="input">
	Duration <input type="text" value="2000" id="redbox-input-01"> ms.
</div>
<ul class="buttons">
    <li id="redbox-btn-05">Start</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;
}
.input {
    padding: 5px 0 5px 0;
    font-size: 1.2em;
}