Timer with target milliseconds

by mnk

HTML

<div id="theDate" data-countdown="4000" data-iteration-delay="1000"></div>

CSS

.complete {
    color: tomato;
}

JavaScript

var elem = document.getElementById('theDate');
var countdown = elem.getAttribute('data-countdown');
var delay = elem.getAttribute('data-iteration-delay') || 1000;

var date = new Date();
date.setMilliseconds(delay);
updateTime(date);
function updateTime(value){
    elem.innerHTML = value;
}
var interval = setInterval(function(){
    countdown-= delay;
    date.setMilliseconds(date.getMilliseconds()-delay);
    updateTime(date);
    if (countdown <=0){
        clearTimeout(interval);
        elem.className = elem.className + " complete";
    }
}, delay);