1. Copy and paste the following between your HEAD tags:-

function CalcChange(){
percentChange.change.value="";
percentChange.percent.value="";
percentChange.thirdnum.value="";
percentChange.fourthnum.value="";
percentChange.change1.value="";
percentChange.percent1.value="";

var places=percentChange.places.value;
var number1=percentChange.firstnum.value;
var number2=percentChange.secondnum.value;
if (number1=="" || number2=="")
{return false }
else
{var diff=number2-number1;
percentChange.change.value=Math.abs(diff);
percentChange.percent.value=(Math.abs(((number1-number2)/number1))*100).toFixed(places)+"%";

percentChange.fourthnum.value=percentChange.firstnum.value;
percentChange.thirdnum.value=percentChange.secondnum.value;
var diff=number1-number2;
percentChange.change1.value=Math.abs(diff);
percentChange.percent1.value=(Math.abs(((number1-number2)/number2))*100).toFixed(places)+"%"}

if (diff>0)
{change.innerHTML="Decrease";
pchange.innerHTML="% Decrease";
change1.innerHTML="Increase";
pchange1.innerHTML="% Increase"}

else if (diff==0)
{change.innerHTML="Change";
pchange.innerHTML="% Change";
change1.innerHTML="Change";
pchange1.innerHTML="% Change"}

else
{change.innerHTML="Increase";
pchange.innerHTML="% Increase";
change1.innerHTML="Decrease";
pchange1.innerHTML="% Decrease"}
}

function select_area()
{percentChange.places.select()}
</script>

*********************************
2. Copy and paste the following code between your BODY tags where you want the input displayed:
<div style="position:absolute; left:250; top:200">
<table width=100% border=0 bordercolor=#ffff00 cellspacing="0" cellpadding="0"><tr><td>

<h3 align="center">Calculate Percentage Change</h3><ul type="square">
<li>The percentage change between two numbers depends on whether we are considering a reduction in value or an increase.  
<li>A reduction in value will always result in a higher percentage change than will an addition in value. That's because the higher the base, the lower the percentage for any given change.
<li>For example, a <b>reduction</b> from 25 to 20 will result in a <b>20% reduction</b> (25-20=5/25) but an <b>increase</b> from 20 to 25 will result in a <b>25% increase</b> (25-20=5/20). 
</ul>
<p>

<fieldset>
<legend align="center" style="color:#000000;font-size:14pt">Percentage Change</legend>
<table width=100% border=0 bordercolor=#ffff00 cellspacing="0" cellpadding="0">
<form name="percentChange">
<tr><td align="center">Base Number</td><td align="center">Final Number</td><td align="center" id="change">Change</td><td align="center" id="pchange">% Change</td></tr>

<tr><td align="center">
<input type="text" style="text-align:center" name="firstnum" size=8 onKeyUp="CalcChange()" onKeyPress="if ((event.keyCode<46) || (event.keyCode>57)) event.returnValue=false">

<td align="center">
<input type="text" style="text-align:center" name="secondnum" size=8 onKeyUp="CalcChange()" onKeyPress="if ((event.keyCode<46) || (event.keyCode>57)) event.returnValue=false">
 
<td align="center">
<input type="text" style="text-align:center" name="change" size=8 readOnly>
<td align="center">
<input type="text" style="text-align:center" name="percent" size=8 readOnly>

<tr><td colspan=4> </td></tr><br>
<tr><td colspan=4 style="color:#0000ff">The Above Numbers Reversed below==>>==>>
<tr><td align="center">Base Number</td><td align="center">Final Number</td><td align="center" id="change1">Change</td><td align="center" id="pchange1">% Change</td></tr>

<tr><td colspan=4> </td></tr>
<tr><td colspan=4 align="center">Results to  
<input type="text" style="text-align:center" name="places" value=1 size=2 onKeyUp="CalcChange()" onKeyPress="if ((event.keyCode<46) || (event.keyCode>57)) event.returnValue=false" onClick="select_area()"> decimal places
<a href="http://www.datedial.com/datpercentage_change.asp">.</a>
</form>
</td></tr></table>
</fieldset>
</td></tr></table>
</div>

*********************************
Please Note
You can display where ever you like. You change the "left" and "top" values in the opening "div" tag above to whatever values you need. 
a) "top" is the vertical distance of the top left corner of the display starting at zero. The higher the number the lower down the page.
b) "left" is the horizontal distance of the top left corner of the display starting at zero. The higher the number the further across the page.
c) You can change also the color of the display and the background.

If you have any problems or questions please email us at info@datedial.com.

Linking Information:-
TITLE : Percentage Change
URL : http://www.datedial.com/datPercentage_Change.asp
DESCRIPTION : Percentage change.