Membuat dan Memasang HTML Kalkulator dengan Javascript


Tuturial sederhana ini tentang bagaimana membuat Kalkulator yang selanjutnya dapat dipasang pada web anda sebagai alat bantu perhitungan sederhana untuk pengunjung website anda. Bagi anda yang tidak mau susah payah dalam membuat Form kalkulasi dapat menggunakan kalkulator ini sebagai alternatif terutama pada website html/php yang bersifat statis.
Cara pembuatan Calculator dengan code pemrograman Javascript tidaklah terlalu sulit, anda bisa copy & Paste code berikut dan pasang langsung di halaman website/di tempat yang anda inginkan kalkulator ini untuk ditampilkan.
Silahkan copy code Form Html ini dan tempatkan diantara <Body></BODY> HTML webpage anda :

<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>
Kalkulator Javascript diatas bisa juga anda pasang langsung pada CMS website yang anda gunakan sebagai Widget di Website WordPress anda, atau bagi pengguna Joomla bisa dipasang sebagai Module dengan Copy & Paste pada Editor .

7 Comments Add yours

  1. RedBalloon discounts mengatakan:

    Today, while I was at work, my sister stole my apple ipad and tested to see if it can survive a 25 foot drop, just so she can be a youtube sensation.
    My iPad is now destroyed and she has 83 views. I know this is completely off topic but
    I had to share it with someone!

  2. Proskin Coupon Code mengatakan:

    Helpful information. Lucky me I discovered your
    web site accidentally, and I’m surprised why this accident did not took
    place in advance! I bookmarked it.

  3. Good day! I know this is kind of off topic but I was
    wondering which blog platform are you using for this site?

    I’m getting tired of WordPress because I’ve had issues with hackers and I’m looking at options
    for another platform. I would be fantastic if
    you could point me in the direction of a good platform.

  4. Hi there colleagues, how is all, and what you desire
    to say regarding this post, in my view its really awesome for me.

  5. I am genuinely delighted to read this webpage posts which consists of lots
    of valuable data, thanks for providing these statistics.

  6. Automotix coupon code mengatakan:

    Unquestionably imagine that which you said. Your favourite justification appeared to be
    at the net the easiest factor to remember of. I
    say to you, I definitely get irked while other folks consider concerns
    that they just do not recognise about. You managed to hit the nail upon the top and
    also defined out the whole thing with no need side effect , other folks could take a
    signal. Will likely be back to get more. Thanks

  7. angga mengatakan:

    Maksud dari flagnewnum accum pending op itu apa ya ? Pengertian n fungsinya?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s