Post: HTML Rainbow Calculator
Options
02-24-2011, 02:58 AM
#1
erbisme4
Penn State '16
Here is my html Rainbow Calculator For you guys
.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>
<form name="calculator">
<table border="6" cellpadding="4" cellspacing="0" bordercolor="blue" bgcolor=black>
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="9" width="100%">
<tr>
<td colspan="4">
<input type="text" name="calcResults" value="0" size="20" span style="background-color: pink" style="color: purple" style="text-align: right"></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" C " name="calclear" button style="color:red" onclick="gCalculator.OnClick('c'
"></td><td></td>
<td> </td>
<td><input class="calcBtn" type="button" value=" = " name="calequal" button style="color:" onclick="gCalculator.OnClick('='
"></td></tr>
<tr>
<td><input class="calcBtn" type="button" value=" 7 " name="cal7" button style="color: purple" onclick="gCalculator.OnClick('7'
" ondblclick="gCalculator.OnClick('7'"></td><td><input class="calcBtn" type="button" value=" 8 " name="cal8" button style="color:violet" onclick="gCalculator.OnClick('8'
" ondblclick="gCalculator.OnClick('8'"> </td><td><input class="calcBtn" type="button" value=" 9 " name="cal9" button style="color:indigo" onclick="gCalculator.OnClick('9'
" ondblclick="gCalculator.OnClick('9'"> </td><td><input class="calcBtn" type="button" value=" / " name="caldiv" button style="color: blue" onclick="gCalculator.OnClick('/'
"></td></tr>
<tr>
<td><input class="calcBtn" type="button" value=" 4 " name="cal4" button style="color: olive" onclick="gCalculator.OnClick('4'
" ondblclick="gCalculator.OnClick('4'"> </td><td><input class="calcBtn" type="button" value=" 5 " name="cal5" button style="color:yellow" onclick="gCalculator.OnClick('5'
" ondblclick="gCalculator.OnClick('5'"> </td><td><input class="calcBtn" type="button" value=" 6 " name="cal6" button style="color: orange" onclick="gCalculator.OnClick('6'
" ondblclick="gCalculator.OnClick('6'"> </td><td><input class="calcBtn" type="button" value=" * " name="calmul" button style="color:red" onclick="gCalculator.OnClick('*'
"></td></tr>
<tr>
<td><input class="calcBtn" type="button" value=" 1 " name="cal1" button style="color:violet" onclick="gCalculator.OnClick('1'
" ondblclick="gCalculator.OnClick('1'"> </td><td><input class="calcBtn" type="button" value=" 2 " name="cal2" button style="color:indigo" onclick="gCalculator.OnClick('2'
" ondblclick="gCalculator.OnClick('2'"> </td><td><input class="calcBtn" type="button" value=" 3 " name="cal3" button style="color:blue" onclick="gCalculator.OnClick('3'
" ondblclick="gCalculator.OnClick('3'"> </td><td><input class="calcBtn" type="button" value=" + " name="calplus" button style="color:green" onclick="gCalculator.OnClick('+'
"></td></tr>
<tr>
<td>
<td><input class="calcBtn" type="button" value=" 0 " name="cal0" button style="color:yellow" onclick="gCalculator.OnClick('0'
" ondblclick="gCalculator.OnClick('0'"> </td><td><input class="calcBtn" type="button" value=" . " name="caldec" button style="color: orange" onclick="gCalculator.OnClick('.'
"></td><td><input class="calcBtn" type="button" value=" - " name="calminus" button style="color:red" onclick="gCalculator.OnClick('-'
"></td></tr>
</table>
</td>
</tr>
</table>
</form>
Copyright © 2026, NextGenUpdate.
All Rights Reserved.
