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


Tags: javascript,jquery,html,css,timer

Problem :

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.



Solution :

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/


    CSS Howto..

    how to reposition label which sits on top of the checkbox

    How to stop CSS selector from selecting all child elements

    How to get the real font name of a div on a web page when it set css font-family?

    How can I get width and height of big image after displaying it on html-page?

    How to create rounded edge panel in ExtJS 2.1

    How to display a css animation in the center of the screen

    How to combine Background Image and CSS Gradient

    How to show hidden part of an image which is inside a fixed height div, using just the CSS?

    how can you have layers see through each other on a web page

    How to make text appears alitter above using html and css

    How to add a second border around a CSS circle

    How can I apply a style to a div using CSS as long as that div does NOT contain an element with a certain id?

    How to determine why floated elements are affecting the heights of non-floated elements (D7 views blocks with zen theme)?

    How to remove space between columns in BluePrint CSS framework?

    How can I produce an nested list in XHTML strict without giving the nested lists first element a double bullet?

    OOCSS & BEM - inline list - How to handle scaffolding, how to add skin?

    How to give a matte-finish (non-glassy) look to an image with CSS?

    How can I set up a static Webkit Mask

    How to Set custom text Color in QTextEdit?

    how can i add a separator gif between two content areas something like this?

    How to make element stay in the same position using css?

    how to avoid the ID name in css file

    How to use center-block and vertical align together using Bootstrap?

    How to have a two headings in same line with css?

    Integrating CSS and CherryPy: How to fix the 404 “/” Not Found Error?

    How to add a custom css selector to just a span??

    CSS: how to remove the indent of list items shown in Firefox

    How to use custom underline with breakline in CSS?

    Angular. How to set css properties for “after” and “before” DOM psuedo elements

    How to change the style of the arrow in a select box using css