溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

這么使用jQuery實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能

發(fā)布時(shí)間：2022-07-22 10:03:43 來(lái)源：億速云 閱讀：112 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要講解了“這么使用jQuery實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“這么使用jQuery實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能”吧！

頁(yè)面效果:

這么使用jQuery實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能

源碼：

<!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 = "";  //存放數(shù)字1
        var Num2 = "";  //存放數(shù)字2
        var Char = "";  //存放運(yùn)算符
        var Result = "";//存放結(jié)果
        $(function () {//頁(yè)面加載時(shí)綁定事件
            $("button").hover(function () {
                $(this).css({"background-color":"orange","color":"white"});//鼠標(biāo)懸停時(shí)更改背景顏色與字體顏色
            }, function () {
                $(this).css({ "background-color": "white", "color": "navy" });
            });
            //給運(yùn)算符添加點(diǎn)擊事件
            $('.char').click(function () {
                if (Num2 == "") {
                    Char = $(this).text();
                    $('#content').val(Num1 + Char);
                } else if(Num2!="") {
                    switch (Char) {//當(dāng)Num2存在時(shí) 代表兩個(gè)數(shù)字已存在,并點(diǎn)了一個(gè)新運(yùn)算符  則直接進(jìn)行運(yùn)算
                        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;//將結(jié)果的值賦值給Num1
                    Char = $(this).text();//更新下一次點(diǎn)擊 的運(yùn)算符
                    $('#content').val(Num1 + Char);//將更新完的運(yùn)算符 和結(jié)果一起拼接到文本框中
                }

            });

            //給數(shù)字添加點(diǎn)擊事件
            $('.num').click(function () {
                var txt = $(this).text();//拿到當(dāng)前點(diǎn)擊的數(shù)字按鈕
                if (Char == "") {//如果運(yùn)算符為空 則代表第一次點(diǎn)擊 或者點(diǎn)擊了等于號(hào) 
                    if (Result != Num1) {//如果Result!=Num1 則代表 沒(méi)有點(diǎn)擊=號(hào)
                        Num1 = Num1 + txt;//正常拼接
                        $('#content').val(Num1);//顯示
                    } else {//點(diǎn)擊了=號(hào)
                        Num1 = "";//清空Num1值  以免 等于號(hào)計(jì)算出的結(jié)果直接拼接了新的值
                        Num1 = Num1 + txt;//拼接新的輸入值
                        $('#content').val(Num1);//顯示
                    }
                }else {
                    Num2 = Num2 + txt;//如果運(yùn)算符已存在 則輸入的是第二個(gè)數(shù)
                    $('#content').val(Num1 + Char + Num2);//拼接
                }
            });
            $(".clear").click(function () {//歸零按鈕 清空所有值 并將輸入框按鈕的值還原成0 
                Num1 = "";
                Num2 = "";
                Char = "";
                Result = "";
                $('#content').val("0");
            });
            $(".result").click(function () {
                switch (Char) {//做一個(gè)判斷，不同的運(yùn)算符做不同的運(yùn)算
                    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;//將計(jì)算結(jié)果賦值給Num1
                Char = "";//在這里清空原有的運(yùn)算符 以跟直接點(diǎn)擊+-/*運(yùn)算符區(qū)分開(kāi)
                Num2 = "";//清空Num2的值
            });
        });
    </script>
</head>
<body>
    <div id="all">
        <div id="myCal">
            <div >jQuery簡(jiǎn)易計(jì)算器</div>
            <table >
                <tr>
                    <td colspan="4"><input id="content" value="0"  /></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>

感謝各位的閱讀，以上就是“這么使用jQuery實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)這么使用jQuery實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手