How to correct the delay occuring to a countdown timer?

Question

I've a JSFiddle

In this fiddle the count down timer is running but it's lagging behind in time. Can anyone please correct this issue of time lag behind in the fiddle?

Also when the timer reaches the value 00:04:59 it starts blinking. Now every thing is blinking including the labels, timer hr, min, sec values, the colons in between. I want to blink only the min and sec digits when timer reaches to 00:04:59 but the red font-color which is applying now should be the same for all the elements. No change in font-color.

Answer 1

The error was because a timeFlag variable:

  if(timeFlag == 0) {
    secs--; 
    timeFlag++;
  } else {
    timeFlag--;
  }

this means that the code secs--; was executed only once in 2 seconds.

Correction: http://jsfiddle.net/artur99/FvYyS/17/

Answer 2

I have changed code for blinking the min and sec digits alone

Try this code:

DEMO

  if( hrs <= 0 && mins <= 4)
  {
     document.getElementById('list').style.color="red";
  }
  else
  {
      document.getElementById('list').style.color="black";
      styleFlag = 1;  
  }
  if(styleFlag == 0) {
     styleFlag = 1;  
     document.getElementById('hr').innerHTML = hours;
     document.getElementById('mins').innerHTML = "";
     document.getElementById('sec').innerHTML = "";
  }    
  else
  {
      styleFlag = 0; 
      document.getElementById('hr').innerHTML = hours;
      document.getElementById('mins').innerHTML = minutes;
      document.getElementById('sec').innerHTML = seconds;
  }