jQuery實現簡易計算器功能

2022-07-21 14:01:47
jQuery製作一個簡易計算器，供大家參考，具體內容如下
頁面效果:
原始碼：
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        #all {
            width: 600px;
            margin: 0px auto;
            background-color: deepskyblue;
            height: 400px;
            padding-top: 20px;
        }

        #myCal {
            width: 500px;
            height: 300px;
            margin: 0px auto;
        }

        table {
            border-collapse: collapse;
            text-align: center;
        }

        td {
            border: 1px solid white;
        }

        button {
            width: 96px;
            height: 40px;
            font-size: 26px;
            font-family: "宋體";
            color: navy;
            background-color:white;
        }
    </style>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script>
        var Num1 = "";  //存放數位1
        var Num2 = "";  //存放數位2
        var Char = "";  //存放運運算元
        var Result = "";//存放結果
        $(function () {//頁面載入時繫結事件
            $("button").hover(function () {
                $(this).css({"background-color":"orange","color":"white"});//滑鼠懸停時更改背景顏色與字型顏色
            }, function () {
                $(this).css({ "background-color": "white", "color": "navy" });
            });
            //給運運算元新增點選事件
            $('.char').click(function () {
                if (Num2 == "") {
                    Char = $(this).text();
                    $('#content').val(Num1 + Char);
                } else if(Num2!="") {
                    switch (Char) {//當Num2存在時 代表兩個數位已存在,並點了一個新運運算元  則直接進行運算
                        case "+":
                            Result = parseFloat(Num1) + parseFloat(Num2);
                            break;
                        case "-":
                            Result = parseFloat(Num1) - parseFloat(Num2);
                            break;
                        case "*":
                            Result = parseFloat(Num1) * parseFloat(Num2);
                            break;
                        case "/":
                            Result = parseFloat(Num1) / parseFloat(Num2);
                            break;
                    }
                    Num2 = "";//清空Num2的值
                    Num1 = Result;//將結果的值賦值給Num1
                    Char = $(this).text();//更新下一次點選 的運運算元
                    $('#content').val(Num1 + Char);//將更新完的運運算元 和結果一起拼接到文字方塊中
                }

            });

            //給數位新增點選事件
            $('.num').click(function () {
                var txt = $(this).text();//拿到當前點選的數位按鈕
                if (Char == "") {//如果運運算元為空 則代表第一次點選 或者點選了等於號 
                    if (Result != Num1) {//如果Result!=Num1 則代表 沒有點選=號
                        Num1 = Num1 + txt;//正常拼接
                        $('#content').val(Num1);//顯示
                    } else {//點選了=號
                        Num1 = "";//清空Num1值  以免 等於號計算出的結果直接拼接了新的值
                        Num1 = Num1 + txt;//拼接新的輸入值
                        $('#content').val(Num1);//顯示
                    }
                }else {
                    Num2 = Num2 + txt;//如果運運算元已存在 則輸入的是第二個數
                    $('#content').val(Num1 + Char + Num2);//拼接
                }
            });
            $(".clear").click(function () {//歸零按鈕 清空所有值 並將輸入框按鈕的值還原成0 
                Num1 = "";
                Num2 = "";
                Char = "";
                Result = "";
                $('#content').val("0");
            });
            $(".result").click(function () {
                switch (Char) {//做一個判斷，不同的運運算元做不同的運算
                    case "+":
                        Result = parseFloat(Num1) + parseFloat(Num2);
                        break;
                    case "-":
                        Result = parseFloat(Num1) - parseFloat(Num2);
                        break;
                    case "*":
                        Result = parseFloat(Num1) * parseFloat(Num2);
                        break;
                    case "/":
                        Result = parseFloat(Num1) / parseFloat(Num2);
                        break;
                }
                $('#content').val(Result);
                Num1 = Result;//將計算結果賦值給Num1
                Char = "";//在這裡清空原有的運運算元 以跟直接點選+-/*運運算元區分開
                Num2 = "";//清空Num2的值
            });
        });
    </script>
</head>
<body>
    <div id="all">
        <div id="myCal">
            <div style="margin:auto;text-align:center;font-size:20px;font-family:'宋體';color:navy'">jQuery簡易計算器</div>
            <table style="margin-top:20px;">
                <tr>
                    <td colspan="4"><input id="content" value="0" style="height:40px;width:490px;font-size:30px;color:blue;font-family:'宋體';text-align:right" /></td>
                </tr>
                <tr>
                    <td><button class="num">7</button></td>
                    <td><button class="num">8</button></td>
                    <td><button class="num">9</button></td>
                    <td><button class="char">+</button></td>
                </tr>
                <tr>
                    <td><button class="num">4</button></td>
                    <td><button class="num">5</button></td>
                    <td><button class="num">6</button></td>
                    <td><button class="char">-</button></td>
                </tr>
                <tr>
                    <td><button class="num">1</button></td>
                    <td><button class="num">2</button></td>
                    <td><button class="num">3</button></td>
                    <td><button class="char">*</button></td>
                </tr>
                <tr>
                    <td><button class="num">0</button></td>
                    <td><button class="clear">C</button></td>
                    <td><button class="char">/</button></td>
                    <td><button class="result">=</button></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
jQuery實現簡易計算器功能

熱門文章
