Kalkulator Sederhana dengan Javascript Part 2

Kalkulator Sederhana dengan Javascript Part 2 – Memenuhi janji saya pada postingan sebelumnya untuk menghadirkan cara membuat kalkulator sederhana dengan menggunakan Javascript yang dilakukan dengan membangun method secara manual atau satu persatu.

Tidak perlu penjelasan yang panjang lebar, langsung saja sobat coba analisa dan jalankan code di bawah ini. Dan satu lagi untuk kalkulator yang satu ini menggunakan code CSS untuk memperindah tampilan layout.

Source code program:

<html>
<head>
<title>Kalkulator Sederhana</title>
<style type="text/css">
/*code css*/
#tbl{
    background:#CCC -moz-linear-gradient(top,#FC9,#F60);
    -moz-box-shadow:2px 2px 15px; #000;
    margin-top:20px;
}
.btn{
    background-color:#000;
    width:50px;
    height:30px;
    font-size:5mm;
    font-family:tahoma;
    display:block;
    color:#FFF;
    text-decoration:none;
    border-style:outset;
}
.btn:hover{
    border-style: inset;
    background-color:#666;
}
.tmpl{
    width:240px;
    height:30px;
    font-size:5mm;
    font-family:tahoma;
    border-style: inset;
    -moz-border-radius:10px 0px 10px 0px;
}
</style>
<script language="javascript">
var angka="";
var bil1,bil2,ttl;
var op,pil;
function nol(){
    angka = angka+"0";
    document.form1.hsl.value = angka;
}
function satu(){
    angka = angka+"1";
    document.form1.hsl.value = angka;
}
function dua(){
    angka = angka+"2";
    document.form1.hsl.value = angka;

}
function tiga(){
    angka = angka+"3";
    document.form1.hsl.value = angka;

}
function empat(){
    angka = angka+"4";
    document.form1.hsl.value = angka;

}
function lima(){
    angka = angka+"5";
    document.form1.hsl.value = angka;

}
function enam(){
    angka = angka+"6";
    document.form1.hsl.value = angka;
}
function tujuh(){
    angka = angka+"7";
    document.form1.hsl.value = angka;
}
function delapan(){
    angka = angka+"8";
    document.form1.hsl.value = angka;
}
function sembilan(){
    angka = angka+"9";
    document.form1.hsl.value = angka;
}
function hps(){
    angka ="";
    document.form1.hsl.value = angka;
}
function tambah(){
    bil1 = angka;
    op   = "+";
    document.form1.hsl.value = op;
    angka = "";
    pil = 1;
}
function krg(){
    bil1 = angka;
    op   = "-";
    document.form1.hsl.value = op;
    angka = "";
    pil = 2;
}
function kali(){
    bil1 = angka;
    op   = "x";
    document.form1.hsl.value = op;
    angka = "";
    pil = 3;
}
function bagi(){
    bil1 = angka;
    op   = "/";
    document.form1.hsl.value = op;
    angka = "";
    pil = 4;
}
function sama_dengan(){
    if(pil==1){
        bil2 = angka
        ttl = parseFloat(bil1)+parseFloat(bil2);
        angka= parseFloat(ttl);
        document.form1.hsl.value = angka;
    }
    else if(pil==2){
        bil2 = angka
        ttl = parseFloat(bil1)-parseFloat(bil2);
        angka= parseFloat(ttl);
        document.form1.hsl.value = angka;
    }
    else if(pil==3){
        bil2 = angka
        ttl = parseFloat(bil1)*parseFloat(bil2);
        angka= parseFloat(ttl);
        document.form1.hsl.value = angka;
    }
    else if(pil==4){
        bil2 = angka
        ttl = parseFloat(bil1)/parseFloat(bil2);
        angka= parseFloat(ttl);
        document.form1.hsl.value = angka;
    }
}
</script>
</head>
<body bgcolor="#FFFFCC">
<p><h1 align="center">KALKULATOR SEDERHANA</h1></p><hr size="10" noshade="noshade"/>
<form name="form1">
<table align="center" cellpadding="2" cellspacing="2" id="tbl">
<tr>
    <td height="60" colspan="4" valign="middle"><input name="hsl" type="text" class="tmpl" id="hsl" /></td>
</tr>
<tr align="center">
    <td><a href="javascript:tujuh();" class="btn">7</a></td>
    <td><a href="javascript:delapan();" class="btn">8</a></td>
    <td><a href="javascript:sembilan();" class="btn">9</a></td>
    <td><a href="javascript:hps();" class="btn">C</a></td>
    </tr>
<tr align="center">
    <td><a href="javascript:empat();" class="btn">4</a></td>
    <td><a href="javascript:lima();" class="btn">5</a></td>
    <td><a href="javascript:enam();" class="btn">6</a></td>
    <td><a href="javascript:bagi();" class="btn">/</a></td>
    </tr>
<tr align="center">
    <td><a href="javascript:satu();" class="btn">1</a></td>
    <td><a href="javascript:dua();" class="btn">2</a></td>
    <td><a href="javascript:tiga();" class="btn">3</a></td>
    <td><a href="javascript:kali();" class="btn">x</a></td>
    </tr>
<tr align="center">
    <td><a href="javascript:nol();" class="btn">0</a></td>
    <td><a href="javascript:sama_dengan();" class="btn">=</a></td>
    <td><a href="javascript:tambah();" class="btn">+</a></td>
    <td><a href="javascript:krg();" class="btn">-</a></td>
    </tr>
<tr align="center">
    <td colspan="4"> </td>
    </tr>
</table>
</form>
<p> </p>
<hr size="10" noshade="noshade"/>
</body>
</html>

Demikian tutorial kali ini semoga bermanfaat dan apabila ada yang ditanyakan silahkan tinggalkan komentar anda.

1 komentar:

UnknownWednesday, 22 May, 2013
:))

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

Kalkulator Sederhana dengan Javascript Part 2

Artikel Terkait

1 komentar:

Koleksi Ceramah Islam MP3

Website Islami

Statistik Blog

Space Iklan