javascript timer changing color

Question

I got a countdown and everytime the days, hours and/or minutes change, the number which has changed shall blink red for 0,5 seconds.

I have no clue how to do it...

This is the timer:

<script>
            var countDownDate = new Date("Jan 10, 2019 00:00:00").getTime();
            var x = setInterval(function() {

            //datum und zeit getten
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);


            // Display the result in the element with id="demo"
            document.getElementById("demo").innerHTML = "Noch "  + days + " Tage, " + hours + " Stunden, "
            + minutes + " Minuten und " + seconds + " Sekunden bis zur Fertigstellung des Spiels!!! ";
            if(days==0){
                document.getElementById("demo").innerHTML = "Nur noch "  + hours + " Stunden, "
            + minutes + " Minuten und " + seconds + " Sekunden bis zur Fertigstellung des Spiels!!! ";
            }
            if(days==0 && hours==0){
                document.getElementById("demo").innerHTML = "Nur noch " + minutes + " Minuten und " + seconds + " Sekunden bis zur Fertigstellung des Spiels!!! ";

            }
            if(days==0 && hours==0 && minutes==0){
                document.getElementById("demo").innerHTML= "Nur noch" + seconds + " Sekunden bis zur Fertigstellung des Spiels!!! ";

            } 
            // If the count down is finished, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "VERÖFFENTLICHT!";
            } 
            if(days % 3==0){
                document.getElementById("sup").style.display ="block";   
                  }else {
                    document.getElementById("sup").style.display ="none"; 
            }, 1000);

     </script>

Answer 1

Save each unit of time so you can compare them, then if they have changed add class="active" to them. After 500 milliseconds remove the active class.

<style>
    .active {
        color: red;
    }
</style>
<div id="demo"></div>
<div id="sup"></div>
    <script>
        var countDownDate = new Date("Jan 10, 2019 00:00:00").getTime();

        var old_days = 0;
        var old_hours = 0;
        var old_minutes = 0;
        var old_seconds = 0;

        function updateActiveTimer(unit, number) {
            switch(unit) {
                case 'days':
                    if(number==old_days) {
                        return number;
                    }
                    old_days = number;
                    break;
                case 'hours':
                    if(number==old_hours) {
                        return number;
                    }
                    old_hours = number;
                    break;
                case 'minutes':
                    if(number==old_minutes) {
                        return number;
                    }
                    old_minutes = number;
                    break;
                case 'seconds':
                    if(number==old_seconds) {
                        return number;
                    }
                    old_seconds = number;
                    break;
            }

            setTimeout(function() {
                resetActiveTimer();
            }, 500);

            return '<span class="active">'+number+'</span>';
        }

        function resetActiveTimer() {
            var activeElems = document.getElementsByClassName('active');
            for(var i=0;i<activeElems.length;i++) {
                activeElems[i].classList.remove('active');
            }
        }

        var x = setInterval(function() {

            //datum und zeit getten
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);


            // Display the result in the element with id="demo"
            document.getElementById("demo").innerHTML = "Noch "  + updateActiveTimer('days', days) + " Tage, " + updateActiveTimer('hours', hours) + " Stunden, " + updateActiveTimer('minutes', minutes) + " Minuten und " + updateActiveTimer('seconds', seconds) + " Sekunden bis zur Fertigstellung des Spiels!!! ";
            if(days==0){
                document.getElementById("demo").innerHTML = "Nur noch "  + updateActiveTimer('hours', hours) + " Stunden, " + updateActiveTimer('minutes', minutes) + " Minuten und " + updateActiveTimer('seconds', seconds) + " Sekunden bis zur Fertigstellung des Spiels!!! ";
            }
            if(days==0 && hours==0){
                document.getElementById("demo").innerHTML = "Nur noch " + updateActiveTimer('minutes', minutes) + " Minuten und " + updateActiveTimer('seconds', seconds) + " Sekunden bis zur Fertigstellung des Spiels!!! ";

            }
            if(days==0 && hours==0 && minutes==0){
                document.getElementById("demo").innerHTML= "Nur noch" + updateActiveTimer('seconds', seconds) + " Sekunden bis zur Fertigstellung des Spiels!!! ";
            } 
            // If the count down is finished, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "VERÖFFENTLICHT!";
            } 
            if(days % 3==0){
                document.getElementById("sup").style.display ="block";   
            }else {
                document.getElementById("sup").style.display ="none";
            }
        }, 1000);

    </script>