Web

[자바스크립트] 계산기 만들기

dackyy 2022. 9. 13. 14:40
반응형

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>계산기</title>
    <style>
        .num{
            width: 32px;
        }
        .op{
            width: 30px;
        }
        .func{
            width: 30px;
        }
        td button:nth-child(-n+3){
            color: blue;
        }
        td button:nth-child(4){
            color: lightgreen;
        }
        td button:nth-child(5){
            color: green;
            width: 33px;
        }
    </style>
    <script type="text/javascript">
        var operator = '';
        var number = 0;
        var flag = false;
    function num(num){ //숫자를 입력했을때 화면에 띄워주는 함수 (String 으로 관리하여 자리수를 편하게 입력)
            var value = document.getElementById("text").value;
            document.getElementById("text").value = value + num;
        }
    function point(){ //소수점을 입력하는 함수 입력된 값에 .이 있으면 소수점을 입력하지 않는다
            var value = document.getElementById("text").value;
            if(String(value).includes(".")){return}
            document.getElementById("text").value = value + '.';
        }
    function abs(){ //부호를 바꿔주는 함수 버튼을 누를때마다 -1을 곱하여 부호를 바꿔준다
        var value = document.getElementById("text").value;
        document.getElementById("text").value = -1 * value;
    }
    function cal(op){ //연산자를 입력받는 함수 바로 전 입력이 연산자였다면 다시 입력을 받지않음
        if(flag){ 
            document.getElementById("text").value = null;
            return }
        number = document.getElementById("text").value;
        operator = op;
        document.getElementById("text").value = null;
        flag = true;
    }
    function equal(){ // = 연산자를 눌러 계산하는 함수. 연산자를 판단하고 계산 실행
        number = parseInt(number);
        if(operator === "+"){
            document.getElementById("text").value = number + parseInt(document.getElementById("text").value);}
        else if(operator === "-"){
            document.getElementById("text").value = number - parseInt(document.getElementById("text").value);}
        else if(operator === "*"){
            document.getElementById("text").value = number * parseInt(document.getElementById("text").value);}
        else if(operator === "/"){
            document.getElementById("text").value = number / parseInt(document.getElementById("text").value);}
        else if(operator === "^"){
            document.getElementById("text").value = number ** parseInt(document.getElementById("text").value);}
        flag = false;
    }
    function tri(op){ //삼각함수를 계산하는 함수
        number =  document.getElementById("text").value;
        if(op === "sin"){
            document.getElementById("text").value = Math.sin(number * Math.PI / 180);}
        else if(op === "cos"){
            document.getElementById("text").value = Math.cos(number * Math.PI / 180);}
        else if(op === "tan"){
            document.getElementById("text").value = Math.tan(number * Math.PI / 180);}
    }
    </script>
</head>
<body>
<div align="left">
    <input type="text" id="text" placeholder="0" style="text-align:right; width:200px;"><br>
    <form >
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button style="width : 80px; " value="Clear" onclick="">Clear</button>
    <input style="width : 80px;" type="button" value="=" onclick="equal()"><br>
    </form>
</div>
<table>
    <tr>
        <td>
            <button class="num" onclick="num(1)">1</button>
            <button class="num" onclick="num(2)">2</button>
            <button class="num" onclick="num(3)">3</button>
            &nbsp
            &nbsp
            <button class="op" onclick="cal('+')" type="submit">+</button>
            &nbsp
            <button class="func" onclick="cal('^')" type="submit">x^y</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="num" onclick="num(4)" type="submit">4</button>
            <button class="num" onclick="num(5)" type="submit">5</button>
            <button class="num" onclick="num(6)" type="submit">6</button>
            &nbsp
            &nbsp
            <button class="op" onclick="cal('-')" type="submit">-</button>
            &nbsp
            <button class="func" onclick="tri('sin')" type="submit">sin</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="num" onclick="num(7)" type="submit">7</button>
            <button class="num" onclick="num(8)" type="submit">8</button>
            <button class="num" onclick="num(9)" type="submit">9</button>
            &nbsp
            &nbsp
            <button class="op" onclick="cal('*')" type="submit">*</button>
            &nbsp
            <button class="func" onclick="tri('cos')" type="submit">cos</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="num" onclick="num(0)" type="submit">0</button>
            <button class="num" onclick="abs()" type="submit">+/-</button>
            <button class="num" onclick="point()" type="submit">.</button>
            &nbsp
            &nbsp
            <button class="op" onclick="cal('/')" type="submit">/</button>
            &nbsp
            <button class="func" onclick="tri('tan')" type="submit">tan</button>
        </td>
    </tr>
</table>
</body>
</html>
반응형