계산기 만들기

이대희·2020년 5월 8일
0

이것 또한 인터넷을 보면서 따라 만들어 본것이다. 조금의 css또한 HTML에 포함 시켰다.```

<!DOCTYPE html>
<html>
<head>
    <title>내가 만든 계사나가기가ㅣ가ㅣ</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            padding: 5px 10px;
            text-align: center;
        }
        input {
            text-align: right;
            border: none;
        }
        input:focus {
            outline: none;
        }
    </style>
</head>
<body>
    <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 colspan="3" onclick="reset()" style="background-color: grey;" >AC</td>
            <td onclick="add('/')" style="background-color: grey;" >/</td>
        </tr>
        <tr>
            <td onclick="add(7)" style="background-color :slategrey;" >7</td>
            <td onclick="add(8)" style="background-color :slategrey;">8</td>
            <td onclick="add(9)" style="background-color :slategrey;">9</td>
            <td onclick="add('*')" style="background-color: grey;" >*</td>
        </tr>
        <tr>
            <td onclick="add(4)" style="background-color :slategrey;" >4</td>
            <td onclick="add(5)" style="background-color :slategrey;" >5</td>
            <td onclick="add(6)" style="background-color :slategrey;" >6</td>
            <td onclick="add('-')" style="background-color: grey;" >-</td>
        </tr>
        <tr>
            <td onclick="add(1)" style="background-color :slategrey;" >1</td>
            <td onclick="add(2)" style="background-color :slategrey;" >2</td>
            <td onclick="add(3)" style="background-color :slategrey;" >3</td>
            <td onclick="add('+')" style="background-color: grey;" >+</td>
        </tr>
        <tr>
            <td colspan="2" onclick="add(0)" style="background-color :slategrey;" >0</td>
            <td onclick="add('.')" style="background-color: grey;" >.</td>
            <td onclick="calculate()" style="background-color: red;" >=</td>
        </tr>
    </table>
    <script>
        function add(char) {
            var display = document.getElementById('display'); 
            display.value = display.value + char;
        }
        function calculate() {
            var display = document.getElementById('display');
            var result = eval(display.value); 
            document.getElementById('result').value = result;
        }
        function reset() {
            document.getElementById('display').value = "";
            document.getElementById('result').value = "";
        }
    </script>
</body>
</html>
profile
이대희
고라니
이전 포스트

로또 만들기!

다음 포스트

블로그 만들기! 설치 및 환경 설정

0개의 댓글