kalkulator javascript

javascript calculator

Belajar Internet Marketing Gratis Bulan Pertama

Membuat JavaScript Kalkulator

by on Nov.25, 2009, under Pemrograman Web

Hi friends.. seperti yg udah pernah gw janjiin nih gw kasih lg program unik yg bisa dipake buat belajar dan iseng-iseng. Program ini adalah sebuah kalkulator yang menggunakan JavaScript dan HTML.

Kalkulator yg dibuat nantinya akan memiliki kondisi seperti ini:

Kalkulator simple ( a + b = c) dimana a, +, b, c adalah input box
yang keempatnya diisi dengan menekan button/link
contoh button
0 1 2 3 4 5 6 7 8 9 + – =
bila dalam keadaan kosong menekan angka, maka ‘a’ akan terisi angka
menekan tanda +/- akan mengisi operator dan memindahkan kursor ke teks box B
menekan angka saat kursor di teks box B akan mengisinya
ketika menekan tanda =
maka pada teks box C akan muncul hasil

So, begini deh script kalkulatornya :

<html>
<head>
<title>JAVASCRIPT CALCULATOR</title>
<meta name="Programmer" content="Randy Septian D. Putra" />
<script language="javascript" type="text/javascript">
<!--
  var flag = false;
  function isi(num) {
    if (flag) calc.b.value += num;
    else calc.a.value += num;
  }
  function tambah()
  {
    calc.opr.value = ' + '
    flag = true;
    calc.b.focus()
  }
  function kurang()
  {
    calc.opr.value = ' - '
    flag = true;
    calc.b.focus()
  }
  function kosong()
  {
    calc.a.focus()
    calc.a.value=""
    calc.opr.value=""
    calc.b.value=""
    calc.c.value=""
    flag = false;
  }
//-->
</script>
<style type="text/css">
p {
  font-family:verdana;
  font-size:10px;
  line-height:1.6em;
  font-weight:bold;
  color:#727272
}
</style>
</head>
<body onload=kosong()>
<center>
<p style="padding:20px 0px 30px 0px"><font size="6">JavaScript Calculator</font></p>
<form name="calc">
  <table border="4" bordercolor="#3333ff">
    <tr>
      <td>
      <input type="text" name="a" size="2" />
      <input type="text" name="opr" size="1" />
      <input type="text" name="b" size="2" /> =
      <input type="text" name="c" size="2" />
      <br/>
      </td>
    </tr>
    <tr>
      <td>
      <input type="button" name="one"   value="  1  " onclick="isi(1)" />
      <input type="button" name="two"   value="  2  " onclick="isi(2)" />
      <input type="button" name="three" value="  3  " onclick="isi(3)" />
      <input type="button" name="plus"  value="  +  " onclick="tambah()" />
      <br/>
      <input type="button" name="four"  value="  4  " onclick="isi(4)" />
      <input type="button" name="five"  value="  5  " onclick="isi(5)" />
      <input type="button" name="six"   value="  6  " onclick="isi(6)" />
      <input type="button" name="minus" value="  -  " onclick="kurang()" />
      <br/>
      <input type="button" name="seven" value="  7  " onclick="isi(7)" />
      <input type="button" name="eight" value="  8  " onclick="isi(8)" />
      <input type="button" name="nine"  value="  9  " onclick="isi(9)" />
      <br/>
      <input type="button" name="clear" value="  c  " onclick="kosong()" />
      <input type="button" name="zero"  value="  0  " onclick="isi(0)" />
      <input type="button" name="DoIt"  value="  =  " onclick="calc.c.value=eval(calc.a.value+calc.opr.value+calc.b.value)" />
      <br/>
      </td>
    </tr>
  </table>
</form>
<p>Created by : <br/>Randy Septian Dewa Putra</p><hr/>
<p>2009 &copy; RanTech Inc. All Rights Reserved.</p>
</center>
</body>
</html>

Untuk melihat hasilnya coba aja klik disini. Semoga bermanfaat ya.. :sip:

:JavaScript, kalkulator, xHTML

Ingin Belajar Mempromosikan Bisnis Anda ?

15 Comments for this entry

2 Trackbacks / Pingbacks for this entry

Leave a Reply

:hihi: :hiks: :melet: :nangis: :ngakak: :puyeng: :sip: more »

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...