inktherapy Posted November 20, 2008 Share Posted November 20, 2008 Hi,I wrote a clock with a changing background color on it, the problem is sometimes the background color blinks. Is there a work around for this? (see my code) thanks. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Markism Clock</title><style type="text/css">#hour {font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;font-weight:bold;text-align:center;}#minutes {font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;font-weight:bold;text-align:center;}#seconds {font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;font-weight:bold;text-align:center;}</style><script type="text/javascript">// This is BG colorfunction bgColor () {var w = new Date();var h = w.getHours();var x = w.getMinutes();var y = w.getSeconds();var z = w.getMilliseconds(); var timer1 = setTimeout("bgColor()",500); if (x <=9) {x = "0" + x;} if (y <=9) {y = "0" + y;}document.getElementById("hour").innerHTML="<div style='height:30px;background-color:#42"+x+y+"'>"+h+"</div>";document.getElementById("minutes").innerHTML="<div style='height:30px;background-color:#4"+z+y+"'>"+x+"</div>";document.getElementById("seconds").innerHTML="<div style='height:30px;background-color:#426"+z+"'>"+y+"</div>";}window.onload = bgColor;</script></head><body><table cellpadding="0" cellspacing="0" width="50px"><tr> <td id="hour"></td> <td id="minutes"></td> <td id="seconds"></td></tr></table></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted November 20, 2008 Share Posted November 20, 2008 1. I wouldn't put setTimeout() in the middle of that function. I'd put it at the end, just in case something hadn't finished yet.2. I probably wouldn't use setTimeout() at all. I'd use setInterval(). Call it once from your window.onload function and never call it again.3. You're changing more stuff than you have to. Use innerHTML just to change the value of the minutes and seconds, etc. To change the color of the backgrounds, change the style properties, like this: document.getElementById("seconds").style.backgroundColor = whatever. Notice that the javascript version of the property uses camel-case instead of the hyphen.I don't guarantee you won't get a blink if you make these changes. But it's always best to start with best practices, especially in #3 above. My suspicion is that erasing a div element and replacing it with a new div is what causes the blink. Simply changing the background color of your table cell should work more smoothly. Link to comment Share on other sites More sharing options...
inktherapy Posted November 21, 2008 Author Share Posted November 21, 2008 Hi,Yes it also occured to me after reading your suggestions, it's like when the clock ticks it will replace the <div> in every second that could trigger the blinking effect. I should also use your approach in dealing with style properties (is this DOM?) from what I read about DOM is like connecting node, I haven't got that far reading DOM so I should better start again. I will incorporate your suggestions. Thank you. Link to comment Share on other sites More sharing options...
inktherapy Posted November 21, 2008 Author Share Posted November 21, 2008 Hi Deirdre's Dad.It worked! - document.getElementById("hour").style.backgroundColor="#f"+y+z;No more blinking!Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.