Calculator Script

Calculator on Your Web Site

Start copying this template below. You may have to copy and paste the code in two sections if there is a commercial in the way. You don't want to copy and paste the commercial and the code around it. Then paste the HTML code in your HTML editor.

About this Template

See What This Page Looks Like

Put This Code In The HEAD of Your Page. Start copying here:

<STYLE type="text;css">
.calcBtn
{
font-weight : bold/
width: 32px;
height: 32px;
}
</style>

<script language="JavaScript">

function Calculator_OnClick(keyStr)
{
var resultsField = document.calculator.calcResults;

switch (keyStr)
{
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case ".":

if ((this.lastOp==this.opClear) || (this.lastOp==this.opOperator))
{
resultsField.value = keyStr;
}
else
{
// ignore extra decimals
if ((keyStr!=".") || (resultsField.value.indexOf(".")<0))
{
resultsField.value += keyStr;
}

}

this.lastOp = this.opNumber;
break;

case "*":
case "/":
case "+":
case "-":
if (this.lastOp==this.opNumber)
this.Calc();
this.evalStr += resultsField.value + keyStr;

this.lastOp = this.opOperator;
break;

case "=":
this.Calc();
this.lastOp = this.opClear;
break;

case "c":
resultsField.value = "0";
this.lastOp = this.opClear;
break;

default:
alert("'" + keyStr + "' not recognized.");
}

}

function Calculator_Calc()
{
var resultsField = document.calculator.calcResults;
//alert("eval:"+this.evalStr+resultsField.value);
resultsField.value = eval(this.evalStr+resultsField.value);
this.evalStr = "";
}

function Calculator()
{
this.evalStr = "";

this.opNumber = 0;
this.opOperator = 1;
this.opClear = 2;

this.lastOp = this.opClear;

this.OnClick = Calculator_OnClick;
this.Calc = Calculator_Calc;
}

gCalculator = new Calculator();

</script>
-------------------------------------------------------------------------------

Put This Part In the BODY of Your Page. Start copying this part here:

<form name="calculator">

<table border="2" cellpadding="4" cellspacing="0" bordercolor="#000000">
<tr>
<td>
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="4">
<input type="text" name="calcResults" value="0" size="20" style="text-align: right"></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" C " name="calclear" onclick="gCalculator.OnClick('c')"></td>
<td></td>
<td> </td>
<td><input class="calcBtn" type="button" value=" = " name="calequal" onclick="gCalculator.OnClick('=')"></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 7 " name="cal7" onclick="gCalculator.OnClick('7')" ondblclick="gCalculator.OnClick('7')"></td>
<td><input class="calcBtn" type="button" value=" 8 " name="cal8" onclick="gCalculator.OnClick('8')" ondblclick="gCalculator.OnClick('8')"> </td>
<td><input class="calcBtn" type="button" value=" 9 " name="cal9" onclick="gCalculator.OnClick('9')" ondblclick="gCalculator.OnClick('9')"> </td>
<td><input class="calcBtn" type="button" value=" / " name="caldiv" onclick="gCalculator.OnClick('/')"></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 4 " name="cal4" onclick="gCalculator.OnClick('4')" ondblclick="gCalculator.OnClick('4')"> </td>
<td><input class="calcBtn" type="button" value=" 5 " name="cal5" onclick="gCalculator.OnClick('5')" ondblclick="gCalculator.OnClick('5')"> </td>
<td><input class="calcBtn" type="button" value=" 6 " name="cal6" onclick="gCalculator.OnClick('6')" ondblclick="gCalculator.OnClick('6')"> </td>
<td><input class="calcBtn" type="button" value=" * " name="calmul" onclick="gCalculator.OnClick('*')"></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 1 " name="cal1" onclick="gCalculator.OnClick('1')" ondblclick="gCalculator.OnClick('1')"> </td>
<td><input class="calcBtn" type="button" value=" 2 " name="cal2" onclick="gCalculator.OnClick('2')" ondblclick="gCalculator.OnClick('2')"> </td>
<td><input class="calcBtn" type="button" value=" 3 " name="cal3" onclick="gCalculator.OnClick('3')" ondblclick="gCalculator.OnClick('3')"> </td>
<td><input class="calcBtn" type="button" value=" + " name="calplus" onclick="gCalculator.OnClick('+')"></td>
</tr>
<tr>
<td> </td>
<td><input class="calcBtn" type="button" value=" 0 " name="cal0" onclick="gCalculator.OnClick('0')" ondblclick="gCalculator.OnClick('0')"> </td>
<td><input class="calcBtn" type="button" value=" . " name="caldec" onclick="gCalculator.OnClick('.')"></td>
<td><input class="calcBtn" type="button" value=" - " name="calminus" onclick="gCalculator.OnClick('-')"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>

• 1
• 2
• 3