Jquery：计算器小案例

先看效果图

这里写图片描述

使用jquery实现简单的加减乘除

代码分享：html+css+JavaScript

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>计算器</title>
        <link rel="stylesheet" href="css/demo3.css" />
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="js/demo3.js" ></script>
    </head>
    <body>
        <table>
            <tr><td colspan="4">
                <input type="text" id="textResult" disabled="disabled"/>
            </td></tr>
            <tr><td>
                <button id="btn7" value="7" class="num">7</button>
                <button id="btn8" value="8" class="num">8</button>
                <button id="btn9" value="9" class="num">9</button>
                <button id="btnDiv" value="/" class="op">/</button>
            </td></tr>
            <tr><td>
                <button id="btn4" value="4" class="num">4</button>
                <button id="btn5" value="5" class="num">5</button>
                <button id="btn6" value="6" class="num">6</button>
                <button id="btnMul" value="*" class="op">*</button>
            </td></tr>
            <tr><td>
                <button id="btn1" value="1" class="num">1</button>
                <button id="btn2" value="2" class="num">2</button>
                <button id="btn3" value="3" class="num">3</button>
                <button id="btnSub" value="-" class="op">-</button>
            </td></tr>
            <tr><td>
                <button id="btn0" value="0" class="num">0</button>
                <button id="btnClear" value="C">清空</button>
                <button id="btnAdd" value="+" class="op">+</button>
                <button id="btnEqual" value="=" class=" ">=</button>
            </td></tr>
        </table>
    </body>
</html>

css代码：

*{
    padding: 0;
    margin: 0;
}

table{
    width: 250px;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    background-color: antiquewhite;
}
td,th{
    /*border:1px solid #CCCCCC;*/
    height: 45px;
    width: 250px;
    text-align: center;

}
input{
    height: 30px;
    width: 180px;
}
button{
    width: 45px;
    height: 35px;
    border: 1px solid black;
    border-radius:5px;
}

JavaScript代码：

var sNum1="";
var sNum2="";
var sOp="";
var sResult="";
var sInput = "";
$(function(){
    $(".num").click(function(){
        sInput = $("#textResult").val();
        $("#textResult").val(sInput + $(this).val());
        if(sOp == ""){
            sNum1 = $("#textResult").val();
        }
        else{
            sNum2 = $("#textResult").val();
        }
    });
    $(".op").click(function(){
        sInput = "";
        sOp = $(this).val();
        $("#textResult").val("");
    });
    $("#btnEqual").click(function(){
        opNum();
    });
    //清除
    $("#btnClear").click(function(){
        $("#textResult").val(" ");
        sNum1 = "";
        sNum2 = ""
        sOp = "";
        sInput="";
        sResult = "";
    });
});
function opNum(){//操作
    switch(sOp){
        case "+":{
            sResult =( parseInt(sNum1) +parseInt(sNum2)).toString();
            break;
        }
        case "-":{
            sResult =( parseInt(sNum1) - parseInt(sNum2)).toString();
            break;
        }
        case "*":{
            sResult =( parseInt(sNum1) * parseInt(sNum2)).toString();
            break;
        }
        case "/":{
            sResult =( parseInt(sNum1)*1.0 / parseInt(sNum2)).toString();
            break;
        }
        default:{
            break;
        }
    }
    $("#textResult").val(sResult);
    sNum1 = sResult;
    sNum2 = "";
    sOp = "";
    sInput = "";
}

Jquery：计算器小案例

代码分享：html+css+JavaScript

猜你喜欢