利用JavaScript寫一個簡單計算器

更新時間：2021年11月24日 10:33:11 作者：緣分锝天空

這篇文章主要介紹了?如何利用JavaScript寫一個簡單計算器，利用JavaScript寫一個簡單計算器算是一個簡單的小練習吧，需要的小伙伴可以參考一下<BR>

效果如下：

參考程序：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>模擬計算器</title>

    <style>

        button {

            width: 39px;

            height: 30px;

            background-color: rgb(102, 240, 102);

        }

        button:hover {

            background-color: black;

            color: rgb(255, 249, 237);

        }



        button:active {

            background-color: rgb(79, 72, 72);

            color: white;

        }

        table{

            background: rgb(192, 248, 109);

        }

    </style>

</head>



<body>

    <div>

        <table border="1px">

            <tr style="text-align: center;">

                <td colspan="4">

                    <input type="text" id="result" >

                </td>

            </tr>

            <tr>

                <td><button id="le" onclick="getChar('(')">(</button></td>

                <td><button id="rg" onclick="getChar(')')">)</button></td>

                <td><button id="baifen" onclick="getChar('%')">%</button></td>

                <td><button id="C" onclick="clear1()">C</button></td>

            </tr>

            <tr>

                <td><button id="seven" onclick="getChar('7')">7</button></td>

                <td><button id="eight" onclick="getChar('8')">8</button></td>

                <td><button id="nine" onclick="getChar('9')">9</button></td>

                <td><button id="divi" onclick="getChar('/')">/</button></td>

            </tr>

            <tr>

                <td><button id="four" onclick="getChar('4')">4</button></td>

                <td><button id="five" onclick="getChar('5')">5</button></td>

                <td><button id="six" onclick="getChar('6')">6</button></td>

                <td><button id="mul" onclick="getChar('*')">*</button></td>

            </tr>

            <tr>

                <td><button id="one" onclick="getChar('1')">1</button></td>

                <td><button id="two" onclick="getChar('2')">2</button></td>

                <td><button id="three" onclick="getChar('3')">3</button></td>

                <td><button id="dec" onclick="getChar('-')">-</button></td>

            </tr>

            <tr>

                <td><button id="zero" onclick="getChar('0')">0</button></td>

                <td><button id="point" onclick="getChar('.')">.</button></td>

                <td><button id="=" onclick="getResult()">=</button></td>

                <td><button id="add" onclick="getChar('+')">+</button></td>

            </tr>

        </table>

    </div>

</body>

<script>

    // 點擊按鍵返回按鍵值

    function getChar(btnid) {

        var btns = document.getElementsByTagName("button")

        switch (btnid) {

            case '+':

                setNum('+')

                break;

            case '.':

                setNum('.')

                break;

            case '=':

                setNum('=')

                break;

            case '0':

                setNum('0')

                break;

            case '1':

                setNum('1')

                break;

            case '2':

                setNum('2')

                break;

            case '3':

                setNum('3')

                break;

            case '-':

                setNum('-')

                break;

            case '4':

                setNum('4')

                break;

            case '5':

                setNum('5')

                break;

            case '6':

                setNum('6')

                break;

            case '7':

                setNum('7')

                break;

            case '8':

                setNum('8')

                break;

            case '9':

                setNum('9')

                break;

            case '/':

                setNum('/')

                break;

            case '*':

                setNum('*')

                break;

            case '(':

                setNum('(')

                break;

            case ')':

                setNum(')')

                break;

            case '%':

                setNum('%')

                break;

            default:

                break;

        }

    }

    // 清空顯示屏

    function clear1() {

        document.getElementById("result").value = ""

    }

    // 將數(shù)值顯示到顯示屏

    function setNum(charCode) {

        var origin = document.getElementById('result');

        origin.value += charCode;

        origin.innerText = origin.value;

    }

    // 計算結(jié)果

    function getResult(){

        var res=eval(document.getElementById("result").value);

        // 追加'='

        setNum('=');

        // 追加結(jié)果

        setNum(res)

    }

</script>

</html>

備注：在做計算的時候，可以直接使用eval這個函數(shù)，我們就不用自己手動寫加減乘除的計算邏輯了，大大簡化了開發(fā)

例如：

var num=eval(‘3+3')

則運算結(jié)果是num=6

eval函數(shù)用法：

語法：eval（參數(shù)）,參數(shù)是js表達式，為字符串，可以包含變量以及已經(jīng)存在對象的屬性

返回值情況：

參數(shù)類型	返回值
整數(shù)或者函數(shù)	整數(shù)或函數(shù)
字符串（且是表達式）	該字符串表達式的運行結(jié)果
字符串（且是語句或者語句塊）	執(zhí)行該語句塊并返回undefined