JavaScript로 처음 만들어본 계산기 UI 입니다.

HTML을 사용하였고 table을 이용했습니다.


분홍 박스는 연산자 부분이고 기본지원 eval 함수를 사용하였습니다.

파란 박스는 함수 부분이고 기본 지원 Math 함수를 사용하였습니다.

노란 박스는 abs함수가 있다고는 하나 직접 만들어보았습니다.



계산기의 함수부분입니다.



function btn(num)

계산기 텍스트 창에 숫자 넣기 및 total 값 넣기


function btnclear()

total 값 초기화 및 텍스트 창 내용 지우기


function btncal()

계산된 값 텍스트 창에 띄우기


function btnop()

연산자 클릭시 텍스트 창 내용 지우기 및 total 연산자 추가


function btnpow()

제곱 값을 total 값 넣기 및 텍스트 창 출력


function btncos()

cos 값을 total 값 넣기 및 텍스트 창 출력


function btntan()

tan 값을 total 값 넣기 및 텍스트 창 출력


function btnabs()

 절대값 변환 및 total 값넣기 및 텍스트 창 출력



전체 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 
    <table align="center" bgcolor="#7f84b9">
        <tr align="center">
            <td><input type="text" id="text"
                style="width: 98%; height: 20px"><br></td>
        </tr>
 
        <tr align="center">
            <td><input type="button"
                style="width: 49%; height: 30px; background-color: #b8a0c8;"
                value="clear" onclick="btnclear()"> <input type="button"
                onclick="btncal()"
                style="width: 49%; height: 30px; background-color: #b8a0c8;"
                value="="></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(1)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="1"> <input type="button" onclick="btn(2)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="2"> <input type="button" onclick="btn(3)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="3"> <input type="button" onclick="btnop('+')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="+"> <input type="button" onclick="btnpow()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="x^y"></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(4)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="4"> <input type="button" onclick="btn(5)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="5"> <input type="button" onclick="btn(6)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="6"> <input type="button" onclick="btnop('-')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="-"> <input type="button" onclick="btnsin()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="sin"></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(7)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="7"> <input type="button" onclick="btn(8)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="8"> <input type="button" onclick="btn(9)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="9"> <input type="button" onclick="btnop('*')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="*"> <input type="button" onclick="btncos()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="cos"></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(0)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="0"> <input type="button" onclick="btnabs()"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="+/-"> <input type="button" onclick="btn('.')"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="."> <input type="button" onclick="btnop('/')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="/"> <input type="button" onclick="btntan()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="tan"></td>
        </tr>
 
 
    </table>
 
 
    <script type="text/javascript">
 
    var total='';
    function btn(num)
    {
        total+=num;
        document.getElementById("text").value+=num;
    }
    
    function btnclear(){
        document.getElementById("text").value="";
        total='';
    }
    
    function btncal()
    {
        document.getElementById("text").value=eval(total);
    }
    
    function btnop(num)
    {
        total+=num;
        document.getElementById("text").value="";
    }
    
    function btnpow()
    {
        total=Math.pow(total,2);
        document.getElementById("text").value=total;
        
    }
    
    function btnsin()
    {
        total=Math.sin(total*(Math.PI/180));  
        document.getElementById("text").value=total;
    }
    function btncos()
    {
        total=Math.cos(total*(Math.PI/180)); 
        document.getElementById("text").value=total;
    }
    function btntan()
    {
        total=Math.tan(total*(Math.PI/180)); 
        document.getElementById("text").value=total;
    }
    function btnabs()
    {
        total=total*-1;
        document.getElementById("text").value=total;
    }
    
    
 
    
    
    
</script>
 
 
</body>
</html>
cs


'JavaScript' 카테고리의 다른 글

[JavaScript]시간이 흘러가는 시계 만들기  (0) 2018.10.23
[Java Script]글자 나타내기  (0) 2018.10.23
[JavaScript]랜덤 이미지 변경  (0) 2018.10.23
JavaScript 를 이용한 달력 만들기  (2) 2018.10.19
JavaScript를 이용한 배경색 바꾸기  (1) 2018.10.19

+ Recent posts

티스토리툴바