Pace Calculator (Source)

<html>
<head>
<!-- author: Keith Jenci -->
<!-- http://www.mredkj.com -->
<title>Pace Calculator</title>

<script language="JavaScript">
<!--
// constants
var TIME = 0;
var DISTANCE = 1;
var PACE = 2;
var MILES = 0;
var METERS = 1;
var KILOMETERS = 2;

// preload images
var distOff = new Image;
distOff.src="../images/runDistOff.gif";
var distOn = new Image;
distOn.src="../images/runDistOn.gif";
var paceOff = new Image;
paceOff.src="../images/runPaceOff.gif";
var paceOn = new Image;
paceOn.src="../images/runPaceOn.gif";
var timeOff = new Image;
timeOff.src="../images/runTimeOff.gif";
var timeOn = new Image;
timeOn.src="../images/runTimeOn.gif";

function changePics(calculateFor)
{
	document.Calc.timePic.src=timeOn.src;
	document.Calc.distPic.src=distOn.src;
	document.Calc.pacePic.src=paceOn.src;

	if (calculateFor==TIME)
	{	document.Calc.timePic.src=timeOff.src; }
	else if (calculateFor==DISTANCE)
	{	document.Calc.distPic.src=distOff.src; }
	else if (calculateFor==PACE)
	{	document.Calc.pacePic.src=paceOff.src; }
}

// -->
</script>

<script language="JavaScript">
<!--
function calcIT()
{
	// Time
	var min=document.Calc.timeM.value;
	var sec=document.Calc.timeS.value;
	var t= (min*1) + (sec/60);

	// Distance
	var d=document.Calc.distance.value;

	// Pace
	var minP=document.Calc.paceM.value;
	var secP=document.Calc.paceS.value;
	var p = (minP*1) + (secP/60);

	// Which result
	var resultValue=document.Calc.CalcWhat.options[document.Calc.CalcWhat.selectedIndex].value;

	if (resultValue==TIME)
	{
		// conversions (both to meters)
		d = distConversion(d, true);
		p = paceConversion(p, true);

		// calculate TIME and round
		t=d*p;
		min=Math.floor(t);
		sec=Math.round(60*(t-min));
		if (sec == 60)
		{
			// to prevent 60 seconds from showing up in the seconds field
			min++;
			sec=0;
		}
		document.Calc.timeM.value=min;
		document.Calc.timeS.value=sec;
	}
	else if (resultValue==DISTANCE)
	{
		// conversion before (pace to meters)
		p = paceConversion(p, true);

		// calculate DISTANCE
		d=t/p;

		// conversion after (distance to desired)
		d = distConversion(d, false);

		// rounding
		document.Calc.distance.value=decimalPlaces(d,2);
	}
	else if (resultValue==PACE)
	{
		// conversion before (distance to meters)
		d = distConversion(d, true);

		// calculate PACE
		p=t/d;

		// conversion after (pace to desired)
		p = paceConversion(p, false);

		// rounding
		minP=Math.floor(p);

		secP=Math.round(60*(p-minP));

		if (secP == 60)
		{
			// to prevent 60 seconds from showing up in the seconds field
			minP++;
			secP = 0;
		}
		document.Calc.paceM.value=minP;
		document.Calc.paceS.value=secP;
	}
}

// when converting distance to meters, multiply by conversion constant
function distConversion(d, toMeters)
{
	if (document.Calc.optDist[MILES].checked)
	{
		// convert miles
		d = (toMeters) ? (d*1609) : (d/1609); 
	}
	else if (document.Calc.optDist[METERS].checked)
	{
		// already in meters
	}
	else if (document.Calc.optDist[KILOMETERS].checked)
	{
		// convert kilometers
		d = (toMeters) ? (d*1000) : (d/1000);
	}
	
	return d;
}

// when converting pace to meters, divide by conversion constant
function paceConversion(p, toMeters)
{
	if (document.Calc.optPace[MILES].checked)
	{	
		// convert miles
		p = (toMeters) ? (p/1609) : (p*1609); 
	}
	else if (document.Calc.optPace[METERS].checked)
	{
		// convert 400 meters
		p = (toMeters) ? (p/400) : (p*400);
	}
	else if (document.Calc.optPace[KILOMETERS].checked)
	{
		// convert kilometers
		p = (toMeters) ? (p/1000) : (p*1000);
	}

	return p;
}

function clearNums()
{
	document.Calc.timeM.value=0;
	document.Calc.timeS.value=0;
	document.Calc.distance.value=0;
	document.Calc.paceM.value=0;
	document.Calc.paceS.value=0;
}

function decimalPlaces(val, places)
{
	// This function returns the value
	// with the number of decimal places requested
	factor = 1;
	for (i=0; i<places; i++)
	{	factor *= 10; }
	val *= factor;
	val = Math.round(val);
	val /= factor;
	return val;
}

// -->
</script>

<script language="JavaScript">
<!--
/*
 * defaultStuff sets the defaults. It is called by the onLoad event.
 */
function defaultStuff()
{
	// set list box default to PACE
	document.Calc.CalcWhat.selectedIndex=2;
	
	// set option buttons to defaults
	document.Calc.optDist[0].checked=true;
	document.Calc.optPace[0].checked=true;
}
// -->
</script>

</head>

<body onLoad="defaultStuff()"> 

<form name="Calc">

<center>
<table border=1 cellpadding=10>
<tr><td bgcolor=white>
<!-- Embedded table -->
<table border=0 cellpadding=0 cellspacing=0>

<tr>
	<td bgcolor="#aacccc" colspan=2 align=center>
	 <br>
	<font size=+1><b>Calculate for:  </b></font>
	<select name=CalcWhat onChange="changePics(document.Calc.CalcWhat.selectedIndex)">
	<option value=0>Time
	<option value=1>Distance
	<option value=2 selected>Pace
	</select>
	</td>
</tr>

<tr>
	<td bgcolor="#aacccc" colspan=2>
	 
 	</td>
</tr>

<tr>
	<td bgcolor=white>
	<img src="../images/runTimeOn.gif" name=timePic width=118 height=24 alt="TIME">
	</td>
	<td bgcolor=white>
	 
	</td>
</tr>

<tr>
	<td bgcolor=white>
	<input type=text name=timeM size=9> minutes  
 	</td>
	<td bgcolor=white>
	<input type=text name=timeS size=9> seconds
 	</td>
</tr>

<tr>
	<td bgcolor="#aacccc" colspan=2>
	 
 	</td>
</tr>

<tr>
	<td bgcolor=white>
	<img src="../images/runDistOn.gif" name=distPic width=118 height=24 alt="DISTANCE">
	</td>
	<td bgcolor=white>
	in  
	<input type=radio name="optDist" value="miles" checked>Miles  
	<input type=radio name="optDist" value="meters">Meters  
	<input type=radio name="optDist" value="kilometers">Kilometers
 	</td>
</tr>

<tr>
	<td bgcolor=white>
	<input type=text name=distance size=9>
 	</td>
	<td bgcolor=white>
	 
	</td>
</tr>

<tr>
	<td bgcolor="#aacccc" colspan=2>
	 
	</td>
</tr>

<tr>
	<td bgcolor=white>
	<img src="../images/runPaceOff.gif" name=pacePic width=118 height=24 alt="PACE">
	</td>
	<td bgcolor=white>
	time per  
	<input type=radio name="optPace" value="miles" checked>Mile  
	<input type=radio name="optPace" value="400meters">400m  
	<input type=radio name="optPace" value="kilometers">Kilometer
 	</td>
</tr>

<tr>
	<td bgcolor=white>
	<input type=text name=paceM size=9> minutes  
 	</td>
	<td bgcolor=white>
	<input type=text name=paceS size=9> seconds
 	</td>
</tr>

<tr>
	<td bgcolor="#aacccc" colspan=2>
	 
	</td>
</tr>

<tr>
	<td bgcolor=white>
	 
	</td>
	<td bgcolor=white>
	 
	</td>
</tr>

<tr>
	<td colspan=2 align=center>
	<input type=button value="Calculate" onClick="calcIT()">
	<input type=button value="Clear" onClick="clearNums()">
 	</td>
</tr>
</table>
<!-- End embedded table -->

</td></tr>
</table>
</center>
<p>

</form>

</body>
</html>