<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test{
background-color: rgb(51, 153, 0);
color: rgb(102, 255, 255);
}
</style>
</head>
<body>
<span id="time"></span>
<script>
function timer(a) {
var e = performance.now();
requestAnimationFrame(function f(b) {
b -= e ;
b > a.duration && (b = a.duration);
var c = b / 1000,
d = c % 60 | 0,
c = c / 60 | 0;
a.elem.innerHTML = (9 < c ? "" : "0") + c + ":" + ((9 < d ? "" : "0") + d);
b == a.duration && a.callback && a.callback();
b < a.duration && requestAnimationFrame(f)
})
};
var span = document.querySelector('#time');
timer({
duration: 5 *1000,
elem : span,
callback : function() { span.classList.add('test')}
})
</script>
</body>
</html>