Monday 7 April 2014

Membuat Caculator Dengan Jquery

By : Admin 07:19 Leave a Comment
malam-malam pulang kuliah capek gak ada kerjaan sambil ngerjai tugas iseng-iseng buat calculator dengan jquery walaupun masi belajar lumayan lah untuk menambah ilmu silakan deh bagi agan yang mau atau berminat ingin belajar langsung saja saya asi script nya saya kasi GRATIS kox hehehe


Untuk scripnya seperti ini gan


<!doctype html>
<html>
<head>
    <title>Calculator dengan JQUERY</title>
    <script src="calculator.js"></script>
    <script>
    $(function(){
        $(window).load(function(){
            $(":text").attr("style","width:50px");
            $("#num1").focus();
        });
        $("#btnReset").click(function(){
            $("#num1").focus();          
        });
        $(":text").keydown(function(e){
            if(e.keyCode==13){
                $("#num2").focus();
            }
            switch(e.keyCode){
                case 8:case 9:case 46:case 35:case 36:case 37:case 39:
                    return true;
                    break;              
            }
            if(!(e.keyCode==190 || e.keyCode==110 || ((e.keyCode>=48) && (e.keyCode<=57)) || ((e.keyCode>=96) && (e.keyCode<=105)))){
                return false;
            }
        });
        $(":button").click(function(){
            var n1=parseFloat($("#num1").val());
            var n2=parseFloat($("#num2").val());
            $("#result").css("text-align","right");
            switch($(this).val().charCodeAt(0)){
                case 43: // ASCII for *
                    $("#result").val(n1+n2);
                    break;
                case 45: // ASCII for -
                    $("#result").val(n1-n2);
                    break;      
                case 42: // ASCII for *
                    $("#result").val(n1*n2);
                    break;  
                case 47: // ASCII for /
                    $("#result").val((n1/n2).toFixed(2));
                    break;                              
            }          
        });
        $(":text").focus(function(){
            $(this).css({"text-align":"right","background-color":"#FFFF99"});
        });  
        $(":text").blur(function(){
            $(this).css({"text-align":"right","background-color":"#FFFFFF"});
        });      
    });
    </script>
</head>
<body>
    <center>
    <form>
        <table cellspacing=5 style="border:10px solid gray;padding:10px;box-shadow:-2px  2px  15px  #8585ab">
            <tr>
                <td>Masukan Nomor pertama</td>
                <td><input type="text" id="num1"></td>
                <td align="center"><input type="button" value="+" id="btnAdd"></td>
                <td align="center"><input type="button" value="-" id="btnSub"></td>
            </tr>
            <tr>
                <td>Masukan Nomor Kedua</td>
                <td><input type="text" id="num2"></td>
                <td align="center"><input type="button" value="*" id="btnMul"></td>
                <td align="center"><input type="button" value="/" id="btnDiv"></td>
            </tr>  
            <tr>
                <td align="right">Hasil</td>
                <td><input type="text" id="result" readonly></td>
                <td colspan=2 align="center"><input type="reset" value="HAPUS" id="btnReset"></td>
            </tr>              
        </table>
    </form>
    <code>Joemansyah</code>
    </center>
</body>
</html>


0 comments:

Post a Comment

Berkomentarlah Dengan sopan dan bijak