24 Januari 2012

Cara Membuat Kalkulator HTML dengan Javascript

Cara Membuat Kalkulator HTML dengan Javascript. Wah udah hampir seminggu nih saya ga menyapa teman teman semua :D. Maklum lagi ujian dikampus. hehehe...Do'ain dapat nilai yang cantik yah :D.

Pada tulisan kali ini saya akan membahas bagaimaana cara membuat kalkulator HTML dengan menggunakan javascript,

Nah langsung aja kita mulai yah :D

Copy kan kode berikut ke notepad kemudian simpan dengan eksistensi .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>

Untuk menjalankannya tinggal buka aja dengan browser yang ada di komputer teman teman.

Nih saya kasih deh screenshot kalkulatornya :D


Share on Facebook
Share on Twitter
Share on Google+

Related : Cara Membuat Kalkulator HTML dengan Javascript

  • Program Pencarian Bagi Dua Mengecil dengan PascalKalo postingan sebelumnya kita membuat program pencarian bagi dua dengan membesar, maka kali ini kita akan membuatnya dalam keadaan mengecil, yuk langsung aja di intip.. ...
  • Program Rata Rata Bilangan dengan Fungsi Procedure pada Pascalsebenarnya banyak cara yang digunakan untuk mencari rata rata dalam pascal. sekarang saya akan menjabarkan pengaplikasian fungsi procedure pada pascal untuk mencari sebu ...
  • Pascal : Program Kuadrat Volum Balok a.     berikut ini saya akan memeberikan contoh pemrograman pascal miMisalkan a = panjang balok, b. tinggi balok, ...
  • Program Pemangkatan Bilangan dengan C++Assalamualaikum, hai sahabat semuaa :D di malam yang dingin ini lagi dapat tugas buat Program Pangkat bilangan dengan C++ nih, kalau dulu kan pake Pascal, nah yang sekar ...
  • Bom Like di FacebookPernahkah suatu ketika ada seorang teman yang meminta kita untuk meng-like statusnya...?? hmmm....dari pada cuma 1 like yang kita berikan, mending semua yang ada di prof ...

3 Komentar:

  1. Keren om..tap sebenarnya yang aku cari bagai mana kalau buat kalkilator estimasi biaya..misal: kredit rumah, pinjaman uang. dll/ tapi terima kasih inffonya.

    BalasHapus

Terimakasih telah meninggalkan Komentar di Didit Blog | Silahkan berkomentar dengan bebas, tidak mengandung SARA | komentar dengan link HIDUP akan dihapus | Terimakasih ^_^