Edit in JSFiddle

var redbox = document.getElementById("redbox-03");
var c = 0, running = true;
var run = function() {
    if(!running) return;
    requestAnimationFrame(run);
    c++;
    redbox.innerHTML = c;
}
var start = function() {
    running = true;
    run();
}
var stop = function() {
    running = false;
    c = 0;
    redbox.innerHTML = c;
}
var startBtn = document.getElementById("redbox-btn-01");
var stopBtn = document.getElementById("redbox-btn-02");
startBtn.addEventListener('click', start);
stopBtn.addEventListener('click', stop);

<div class="demo">
    <div class="redbox" id="redbox-03">0</div>
</div>
<ul class="buttons">
<li id="redbox-btn-01">Start</li>
<li id="redbox-btn-02">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;
}