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 apply CSS style when ID is taken?

    How to make the search form without the search button?

    jQuery UI sortable: how to leave css values of changed items untouched?

    How to hide :before in overflow:hidden element

    How I can replace an existing html val with a value calculated later using html and/or css?

    How to include multiple Css Class in ActionLink?

    How to apply same event to multiple buttons?

    How to align more than one DIVs which list of letters to the center

    CSS How to erase the border from the image link?

    How to achieve “responsiveness” of this template?

    how can I shape the image size according to its nested box

    HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

    How to implement ::ms-clear in CSS?

    how to style a symfony2 form button

    How can i make this border to the end?CSS

    How can I completely centre the “feature” section of my layout (please see links)?

    How can I apply an external CSS class to a span created with dojo.create?

    How can i make infinite flowing background with only CSS?

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    how to select margin for a background image in CSS/CSS3?

    JS/JQuery: How to switch class several times in a loop way?

    How to dim an image keeping transparency untouched with CSS or JS?

    How to add space between elements (but not outside of them) using CSS?

    How to link a table cell?

    Web page not responsive: how to use position absolute and relative?

    How to load only html from web pages in selenium

    Extend page content in height or show white background under content

    How can I format outer table but not inner table

    How to switch css property according to some condition

    Jquery, CSS - How to set element as first in list