JavaScript problem

DarkKnight

Reputable
Joined
Jun 22, 2009
Messages
186
Reaction score
0
FP$
2,109
All right, for anyone willing and able to help me with this, I would much appreciate it...

I have managed to experiment with JavaScript enough that I have been able to create a clock for my webpage.

Unfortunately, however, I would like to add an enlarged font size, and a font color to the JavaScript clock, and I do not know how.

*CODE*
Code:
<script type="text/javascript">
function startTime()
{

var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
<body onload="startTime()">
<div id="txt"></div>
</noscript>
 
Code:
<div id="txt" style="color:#00F; font-size: 25px;"></div>

This will work, you can also do it via a css stylesheet.

This will make the clock 25px and the colour blue.
 
CSS would be the best way to do it.

When building/maintain web pages, it's good, standardised practice to keep the content (HTML/XHTML, etc), style (CSS) and behaviour (JaveScript, PHP, etc) separate. Don't try to edit the style in the Javascript, because styling is the job of your CSS.

So basically, go into your CSS file and type in (with Bapinder's suggested style):
Code:
#txt { color:#00F; font-size: 25px; }

It will do the same thing, but it basically keeps style out of your content and behaviour code. 😛
 
It looks like Bapinder's way did the job.

Going into the CSS and modifying it is a pain in the arse through my host, but the div code alteration allowed me to color and enlarge the TIME without affecting the next script that shows the DATE.

Thanks again, Bapinder.

Side-note: I did alter the color code to 0F0 and changed the font to 200%, rather than 00F and 25px.
Defining pixel size is very strict, and forces the text to remain as the defined size, rather than adjusting for when a browser zooms in on the page.
 
Back
Top Bottom