Display a Clock

HTML + JavaScript for the clock

<head>
<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>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>

Explanation of the code

getElementById()
The getElementById() method returns a reference to the first object with the specified ID.
innerHTML
innerHTML property sets or returns the HTML between the starting and ending tags of a HTML tag.
setTimeout()
The setTimeout() method is used to call a function or evaluate an expression after a specified number of milliseconds.
Syntax:
setTimeout(code,millisec,lang)

Creating a"zebra" table

Table 1: Power Mac G5 tech specs
Configurations Dual 1.8GHz Dual 2GHz Dual 2.5GHz
Model M9454LL/A M9455LL/A M9457LL/A
G5 Processor Dual 1.8GHz PowerPC G5 Dual 2GHz PowerPC G5 Dual 2.5GHz PowerPC G5
Frontside bus 900MHz per processor 1GHz per processor 1.25GHz per processor
Level2 Cache 512K per processor 512K per processor 512K per processor

The JavaScript code for this "zebra" table:

function initTable()
{
var tr;
var rows = document.getElementById('zebraTable').getElementsByTagName('tr');
for (var i = 0; i < rows.length; i ++)
{
  tr = rows[i];
  if(i % 2 == 0)
  {
    tr.style.backgroundColor = '#eee';
  }
}
}

Explanation of the code

getElementsByTagName() Method
The getElementsByTagName() method returns a NodeList of all elements with a specified name.

The JavaScript code above will be called when the browser loads the page. So we need to call the function in the following way:

<body onload="initTable()">

Now I would like to color the table head (<th>) with different colors, so that it will look like the following:

Table 1: Power Mac G5 tech specs
Configurations Dual 1.8GHz Dual 2GHz Dual 2.5GHz
Model M9454LL/A M9455LL/A M9457LL/A
G5 Processor Dual 1.8GHz PowerPC G5 Dual 2GHz PowerPC G5 Dual 2.5GHz PowerPC G5
Frontside bus 900MHz per processor 1GHz per processor 1.25GHz per processor
Level2 Cache 512K per processor 512K per processor 512K per processor

Try to change the JavaScript function "initTable" to do that.

Convert Celsius to Fahrenheit

Insert a number into one of the input fields below:

degrees Celsius
equals
degrees Fahrenheit

The JavaScript for this converter:

function convert(degree)
{
if (degree=="C")
{
fahr=document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value=Math.round(fahr);
}
else	
{
cels=(document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value=Math.round(cels);
}
}

The HTML of the coverter:

<form>
<input id="c" name="c" onkeyup="convert('C')"> degrees Celsius<br />
equals<br />
<input id="f" name="f" onkeyup="convert('F')"> degrees Fahrenheit 
</form>

Switching Stylesheets

Click the following text to alternate between different stylesheet:

default style, new style

HTML code of this:

<p>
<a href="#" onclick="setActiveStyleSheet('style2'); 
		return false;">default style</a>, 
<a href="#" onclick="setActiveStyleSheet('style1'); 
		return false;">new style</a>
</p>

This HTML code is just calling the JavaScript function setActiveStyleSheet, which switches between stylesheets, and passing the title of an alternative stylesheet as a parameter to it. Before showing the implementation of function setActiveStyleSheet let's first take a look at how to add alternative stylesheets, since if we don't have the alternative stylesheets first then we won't be able to operate on them.

HTML code to add alternative stylesheets:

<link rel="alternate stylesheet" type="text/css" 
		href="css/style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" 
		href="css/style2.css" title="style2" />

The way we specify a stylesheet as alternative stylesheet is adding "alternate" in front of "stylesheet" in the rel attribute of the link tag.

The JavaScript code for switching alternative stylesheets:

function setActiveStyleSheet(title)
{
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
  {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) 
    {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}