계산기_자바스크립트 예제

<div class="cacultest">

    <style>

        .cacultest table{border-collapse: collapse;}

        .cacultest tr *{cursor: pointer;}

        .cacultest td {padding: 5px 10px;text-align: center;}

        .cacultest input {border: none;text-align: right;border: none;outline: none;}

    </style>

    <table border="1">

        <tr>

            <td colspan="4">

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

            </td>

        </tr>

        <tr>

            <td colspan="4">

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

            </td>

        </tr>

        <tr>

            <td onclick="reset()" colspan="3">AC</td>

            <td onclick="add('/')">/</td>

        </tr>

        <tr>

            <td onclick="add(7)">7</td>

            <td onclick="add(8)">8</td>

            <td onclick="add(9)">9</td>

            <td onclick="add('*')">*</td>

        </tr>

        <tr>

            <td onclick="add(4)">4</td>

            <td onclick="add(5)">5</td>

            <td onclick="add(6)">6</td>

            <td onclick="add('-')">-</td>

        </tr>

        <tr>

            <td onclick="add(1)">1</td>

            <td onclick="add(2)">2</td>

            <td onclick="add(3)">3</td>

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

        </tr>

        <tr>

            <td onclick="add(0)" colspan="2">0</td>

            <td onclick="add('.')">.</td>

            <td onclick="calculate()">=</td>

        </tr>

    </table>

    <script>

        var numberClicked = false;

        function add(char){

            if(numberClicked == false){ //이전 입력값이 연산자 일 때

                if(isNaN(char) == true){ // 현재 입력값도 연산자 일 때

                }else{ // 연산자가 아닐때

                    document.getElementById('display').value += char;

                }

            }else{ //이전 입력값이 연산자가 아닐 때

                document.getElementById('display').value += char;

            };

            // 이번 입력값이 숫자인지, 연산자인지

            if(isNaN(char)==true){ // 연산자라면 (숫자가 아닌게 참이라면)

                numberClicked = false;

            }else{ // 숫자라면

                numberClicked = true;

            }

        };

        function calculate(){

            var display = document.getElementById('display');

            var result = eval(display.value); // input의 최종 입력값의 결과값

            document.getElementById('result').value = result;

        };

        function reset(){

            document.getElementById('display').value = '';

            document.getElementById('result').value = '';

        }

    </script>

    <hr style="margin: 30px; 0">

</div>

input 의 입력값을 계산하는 단순계산기

AC			/
7	8	9	*
4	5	6	-
1	2	3	+
0		.	=