Cara Membuat Calculator Sederhana dengan HTML

Dalam dunia pemrograman terdapat bermacam-macam keunikan tersendiri. Misalnya sebuah aplikasi calculator yang biasanya kita jumpai dengan ekstensi *.EXE , sekarang bisa kita gunakan dalam format *.HTML . Walaupun masih sangat sederhana, namun bisa kita kembangkan menurut kreativitas kita.

Untuk lebih jelasnya anda bisa copy paste script berikut pada notepad, wordpad,dreamweaver, dll yang merupakan aplikasi untuk membuka script HTML dan kemudian save dengan nama Calculator.HTML.

<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>

Selamat mencoba. ^_^

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

1 komentar:

Tas Sophie Martin mengatakan...

nice info gan,, ^_^ mampir ya ke toko kami... ;)

Posting Komentar