serebann,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.time{
background-color: rgb(51, 153, 0);
color: rgb(102, 255, 255);
padding: 4px 8px;
font-size: 24px;
border-radius: 4px;
}
</style>
</head>
<body>
<input id="go" name="" type="button" value="go" >
<span class="time">0</span>
<script>
function timer(b) {
var c = true;
return {
stop: function() {
c = false
},
play: function() {
var d = performance.now();
c = true;
requestAnimationFrame(function e(a) {
a = (a - d) / b.duration;
1 < a && (a = 1);
b.elem.innerHTML = b.from + (b.to - b.from) * a | 0;
c && 1 == a && (d = performance.now());
c && requestAnimationFrame(e)
})
}
}
};
var span = document.querySelector('.time'),
but = document.querySelector('#go'),
anim = timer({
from : 0,
to : 1000,
duration: 5 * 1000,
elem : span
});
but.addEventListener('mousedown', anim.play);
but.addEventListener('mouseup', anim.stop);
</script>
</body>
</html>