How to change the look of a timer in javascript, css?

Question

Following is the fiddle: jsfiddle

The intitial HTML: code is as below, refer fiddle for javascript code:

<div id="test_time_left">Time Left :<b><span id="time_value" style="padding-left:5px;"></span> </b> </div>

Now I want to change the font color to red and blink the whole timer only when the timer reaches to value 00:05:00. Till then nothing from the timer should get blink or should have red font color. Now the second colon(after min:) is getting blinked from start and only the min value is getting the font color red. Can anyone help me in removing the bugs I've made in the fiddle and correct the functionality? Thanks in advance. Waiting for your answers.

you could use this: if(time=="05"){document.getElementById("myid").style.color="#ff0000";} w3schools.com/jsref/prop_style_color.asp — artur99
– artur99, Commented Feb 4, 2014 at 19:12
Only when minute is 05 and second is 00 or only when minute is 05 and second is any value? — artur99
– artur99, Commented Feb 4, 2014 at 19:14
@artur99:the red color and blinking should start when the timeer is 00:05:00 till it becomes 00:00:00. That is till the end. — PHPLover
– PHPLover, Commented Feb 4, 2014 at 19:15

artur99 · Accepted Answer · 2014-02-04 20:20:19Z

2

Change line 40 to this:

if(mins <= 5) {document.getElementById("time_value").style.color="#ff0000";};

http://jsfiddle.net/RJdwh/4/

This will change the color of the <span id="time_value">. More about colors in js: http://www.w3schools.com/jsref/prop_style_color.asp

Last revision: http://jsfiddle.net/RJdwh/7/

edited Feb 4, 2014 at 20:20

answered Feb 4, 2014 at 19:18

artur99

8086 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

PHPLover Over a year ago

the color of everything is changed to red but the second colon still blinking from start which shouldn't be. And the second thing is when timer reaches 00:05:00 everything should get red and blink. Now everything is getting red but not blinking. SO can you please made some corrections to the fiddle in order to make this happen?

PHPLover Over a year ago

Still it's not done. The second colon is blinking befor timer reaches 00:05:00 and after that nothing is blinking. Actually from 00:05:00 everything has to blink including timer values as well as two colons.

PHPLover Over a year ago

yes it's working but it has still two small issues. First one is the second colon is still blinking befor the timer reaches the value 00:05:00 which should not and the second correction is the duration between blinking is of 2 seconds it should be one second. Other than these everything is as expected. Can you please modify your code to correct these two issues?

artur99 Over a year ago

Do you have skype or Gtalk? Give me your id, we would talk easier. So, you want all to blink when mins is 5 or less and not blinking at all when it is 6 ?

artur99 Over a year ago

So, do you have any Skype or GTalk id? or give me your email

|

Rami.Q · Accepted Answer · 2014-02-04 20:52:23Z

is this what yre you looking for:

http://jsfiddle.net/RJdwh/10/

Function.prototype.Timer = function (interval, calls, onend) {
  var count = 0;
  var payloadFunction = this;
  var startTime = new Date();
  var callbackFunction = function () {
    return payloadFunction(startTime, count);
  };
  var endFunction = function () {
    if (onend) {
      onend(startTime, count, calls);
    }
  };
  var timerFunction =  function () {
    count++;
    if (count < calls && callbackFunction() != false) {
      window.setTimeout(timerFunction, interval);
    } else {
      endFunction();
    }
  };
  timerFunction();
};

function leadingzero (number) {
    return (number < 10) ? '0' + number : number;
}
function countdown (seconds, target) {
  var element = document.getElementById(target);
  var calculateAndShow = function () {
    if (seconds > 0) {
      var h = Math.floor(seconds / 3600);
      var m = Math.floor((seconds % 3600) / 60);
      var s = seconds % 60;
        if(seconds <= 300 ){
             element.style.color ="#FF0000";
            if((seconds%2)>0){
               element.style.color ="#FFFFFF";                
            }
        }
      element.innerHTML='<span>'+
        leadingzero(h) + ':' +
        leadingzero(m) + ':' +
        leadingzero(s)+'</span>';
      seconds--;
    } else {
      return false;
    }
  };
  var completed = function () {
    element.innerHTML = "<strong>Liftoff!<\/strong>";
  };
  calculateAndShow.Timer(1000, Infinity, completed);
}


  new countdown(305, 'time_value');

It blinks once in 2 seconds. He wanted to blink every second, like here: jsfiddle.net/RJdwh/7

Collectives™ on Stack Overflow

How to change the look of a timer in javascript, css?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related