Kalkulator HTML dengan Javascript

Kalkulator berbasis HTML ini dapat dipasang di blog anda. Agar blog anda dapat kelihatan cantik.

Langsung saja. Add gadget copy HTML ini dan save. Lihat hasilnya.

Code:

<form name="Keypad" action>
<table border="1" bgcolor="#838383">
<tr>
<td colspan="5" bgcolor="#DFDFDF">
<input name="ReadOut" type="Text" size="30" value="0">
</td>
</tr>
<tr>
<td bgcolor="#DFDFDF">
<input name="btnSeven" type="Button" value=" 7 " onClick="NumPressed(7)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnEight" type="Button" value=" 8 " onClick="NumPressed(8)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnNine" type="Button" value=" 9 " onClick="NumPressed(9)">
</td>
<td bgcolor="#DFDFDF"><input name="btnNeg" type="Button" value=" +/- " onClick="Neg()"></td>
<td bgcolor="#DFDFDF"><input name="btnPercent" type="Button" value=" % " onClick="Percent()"></td>

</tr>
<tr>
<td bgcolor="#DFDFDF">
<input name="btnFour" type="Button" value=" 4 " onClick="NumPressed(4)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnFive" type="Button" value=" 5 " onClick="NumPressed(5)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnSix" type="Button" value=" 6 " onClick="NumPressed(6)">
</td>
<td bgcolor="#DFDFDF"><input name="btnPlus" type="Button" value=" + "
onClick="Operation('+')"></td>
<td bgcolor="#DFDFDF"><input name="btnMultiply" type="Button" value=" * "
onClick="Operation('*')"></td>

</tr>
<tr>
<td bgcolor="#DFDFDF">
<input name="btnOne" type="Button" value=" 1 " onClick="NumPressed(1)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnTwo" type="Button" value=" 2 " onClick="NumPressed(2)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnThree" type="Button" value=" 3 " onClick="NumPressed(3)">
</td>
<td bgcolor="#DFDFDF"><input name="btnMinus" type="Button" value=" - "
onClick="Operation('-')"></td>
<td bgcolor="#DFDFDF"><input name="btnDivide" type="Button" value=" / "
onClick="Operation('/')"></td>

</tr>
<tr>
<td bgcolor="#DFDFDF">
<input name="btnZero" type="Button" value=" 0 " onClick="NumPressed(0)">
</td>
<td bgcolor="#DFDFDF">
<input name="btnDecimal" type="Button" value=" . " onClick="Decimal()">
</td>
<td colspan="3" bgcolor="#797979">
<input name="btnClear" type="Button" value=" C " onClick="Clear()">
<input name="btnClearEntry" type="Button" value=" CE " onClick="ClearEntry()">
<input name="btnEquals" type="Button" value=" = " onClick="Operation('=')"></td>
</tr>
</table>
</form>
<script LANGUAGE="JavaScript">

var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
</script>

Artikel terkait :