struktur data (stimik himsya): MEMBUAT KALULATOR

KLIK SHOW UNTUK MELIHAT SKEMA KALKULATOR DI BAWAH

<html>
<head>

<title>Untitled Document</title>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$("document").ready(function () {
    var key = null;

    $(".clean").click(function () {
        $('#Result').val("");
    });

    $(".Show").click(function () {
        var EText = $('#Result').val();
        if (EText != "0") {
            var val1 = EText;
            var ButtonVal = $(this);
            var val2 = ButtonVal.text();
            var Res = val1 + val2;
            $('#Result').val(Res);
        } else {
            $('#Result').val()
        }
    });

    $(function () {
        var interRes = null;
        var operator;
        $('.operators').click(function () {
            var value1 = $('#Result').val();
            if (interRes != null) {
                var result = ApplyOperation(interRes, value1, operator);
                interRes = result;
            } else {
                interRes = value1;
            }
            operator = $(this).text();
            $('input').val("");
        });

        $('#Calculate').click(function () {
            var op = operator;
            var res;
            var value2 = $('#Result').val();
            if (value2 != "") {
                res = ApplyOperation(interRes, value2, op);
   } else {
                res = interRes;
            }
            $('#Result').val(res);
            interRes = null;
        });

$('#Akar').click(function () {
            var res = Math.sqrt(interRes);
            $('#Result').val(res);
            interRes = null;
        });

$('#Sin').click(function () {
            var res = Math.sin(interRes);
            $('#Result').val(res);
            interRes = null;
        });

$('#Cos').click(function () {
            var res = Math.cos(interRes);
            $('#Result').val(res);
            interRes = null;
        });

$('#Tan').click(function () {
            var res = Math.tan(interRes);
            $('#Result').val(res);
            interRes = null;
        });

    });

    function ApplyOperation(value1, value2, operator) {
        var res;
        switch (operator) {
            case "+":
                res = tambah(value1, value2);
                break;
            case "-":
                res = kurang(value1, value2);
                break;
            case "*":
                res = kali(value1, value2);
                break;
            case "/":
                res = bagi(value1, value2);
                break;
         case "^":
                res = pangkat(value1, value2);
                break;
        }
        return res;
    }

    function tambah(first, second) {
        var a = parseFloat(first);
        var b = parseFloat(second);
        var tam = a + b;
        return tam;
    }

    function kurang(first, second) {
        var a = parseFloat(first);
        var b = parseFloat(second);
        var kur = a - b;
        return kur;
    }

    function kali(first, second) {
        var a = parseFloat(first);
        var b = parseFloat(second);
        var kal = a * b;
        return kal;
    }

    function bagi(first, second) {
        var a = parseFloat(first);
        var b = parseFloat(second);
        var bag = a / b;
        return bag;
    }

function pangkat(first, second) {
        var a = parseFloat(first);
        var b = parseFloat(second);
        var pang = Math.pow(a, b);
        return pang;
    }
});
</script>
<style type="text/css">
input{
height: 40px;
width: 100%;
text-align: right;
background-color:#CCFF33;
font-style: bold;
color:#000000
font-size: 15px;
}
button{
height: 100%;
width: 100%;
font-size: 16px;
text-align:center;
vertical-align:top;
}
</style>
</head>

<body>
<div align="center">
<table width="411" height="292" border="1">
       <tr>
         <td colspan="5"><div align="center">
           <input name="Input" id="Result" />
         </div></td>
       </tr>
       <tr>
         <td height="36" colspan="2"><button id="ClearAll" type="reset" value="CE" class="clean">CE</button>
         <td width="25%"><button id="Akar" type="button" value="v" class="operators operand">√</button></td>
         <td width="11%"><button id="Pangkat" type="button" value="^" class="operators operand">^</button></td>
         <td width="14%"><button id="Sin" type="button" value="Sin" class="operators operand">Sin</button></td>
    </tr>
       <tr>
         <td width="25%"><button id="satu" type="button" value="1" class="Show">1</button></td>
         <td width="25%"><button id="dua" type="button" value="2" class="Show">2</button></td>
         <td><button id="tiga" type="button" value="3" class="Show">3</button></td>
         <td><button id="Kali" type="button" value="*" class="operators operand">*</button></td>
         <td><button id="Cos" type="button" value="Cos" class="operators operand">Cos</button></td>
       </tr>
       <tr>
         <td><button id="empat" type="button" value="3" class="Show">4</button></td>
         <td><button id="lima" type="button" value="3" class="Show">5</button></td>
         <td><button id="enam" type="button" value="3" class="Show">6</button></td>
         <td><button id="Bagi" type="button" value="/" class="operators operand">/</button></td>
         <td><button id="Tan" type="button" value="Tan" class="operators operand">Tan</button></td>
       </tr>
       <tr>
         <td><button id="tujuh" type="button" value="3" class="Show">7</button></td>
         <td><button id="delapan" type="button" value="8" class="Show">8</button></td>
         <td><button id="sembilan" type="button" value="9" class="Show">9</button></td>
         <td><button id="Tambah" type="button" value="+" class="operators operand">+</button></td>
         <td rowspan="2"><button id="Calculate" type="button" value="=" class="operand">=</button></td>
       </tr>
       <tr>
         <td><button id="nol" type="button" value="0" class="Show">0</button></td>
         <td><button id="dnol" type="button" value="00" class="Show">00</button></td>
         <td><button id="Dot" type="button" value="." class="Show">.</button></td>
         <td><button id="Minus" type="button" value="-" class="operators operand">-</button></td>
       </tr>
</table>
</div>
</body>
</html>

struktur data (stimik himsya)

Selasa, 22 April 2014

MEMBUAT KALULATOR

Tidak ada komentar:

Posting Komentar

Grafik Chart Dengan HTML5