[JavaScript] 자바스크립트를 이용한 계산기 만들기

Web/HTML5&CSS&JavaScript 2018. 10. 19. 20:46





'계산기 UI'



'계산기코드'


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
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<script type="text/javascript">
    var total = "";
    var cnt = 1;
 
    function add(num) {
        total += num;
        document.getElementById("textSpace").value += num;
    }
    function textClear() {
        total = '';
        cnt = 1;
        document.getElementById("textSpace").value = total;
    }
    function cal() {
        document.getElementById("textSpace").value = eval(total);
    }
    function operator(op) {
        total += op;
        document.getElementById("textSpace").value = "";
    }
    function Sin() {
        total = Math.sin(total * Math.PI / 180);
        document.getElementById("textSpace").value = total;
    }
    function Cos() {
        total = Math.cos(total * Math.PI/ 180);
        document.getElementById("textSpace").value = total;
    }
    function Tan() {
        document.getElementById("textSpace").value = Math.tan(total * Math.PI / 180);
    }
    function Pow() {
        document.getElementById("textSpace").value = Math.pow(total, ++cnt);
    }
    function Abs() {
        total = total*-1;
        document.getElementById("textSpace").value = total;
    }
</script>
<body>
    <table align="center" bgcolor=#99e1e5>
        <tr align="center">
        
            <td>
                <input type="text" id="textSpace" style="width: 98%; height: 20px;">
            </td>
        </tr>
        <tr align="center">
            <td>
                <input type="button" value="Clear"
                    style="width: 48%; height: 20px; background-color: #f3e8cb" onclick="textClear()"> 
                <input type="button" name="result" id="Result" value="="
                    style="width: 48%; height: 20px; background-color: #f3e8cb" onclick="cal()">
            </td>
            </tr>
        <tr align="center">
            <td>
                <input type="button" name="number" id="1" value="1"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(1)">
                <input type="button" name="number" id="2" value="2"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(2)">
                <input type="button" name="number" id="3" value="3"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(3)">
                <input type="button" name="op" id="+" value="+"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="operator('+')">
                <input type="button" name="calbtn" id="x^y" value="x^y"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="Pow()">
            </td>
        </tr>
        <tr align="center">
            <td>
                <input type="button" name="number" id="4" value="4"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(4)"> 
                <input    type="button" name="number" id="5" value="5"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(5)"> 
                <input type="button" name="number" id="6" value="6"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(6)"> 
                <input    type="button" name="op" id="-" value="-"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="operator('-')">
                <input type="button" name="calbtn" id="sin" value="sin"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="Sin()">
            </td>
        </tr>
        <tr align="center">
            <td>
                <input type="button" name="number" id="7" value="7"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(7)"> 
                <input    type="button" name="number" id="8" value="8"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(8)"> 
                <input type="button" name="number" id="9" value="9"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(9)"> 
                <input type="button" name="op" id="*" value="*"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="operator('*')">
                <input type="button" name="calbtn" id="cos" value="cos"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="Cos()">
            </td>
        </tr>
        <tr align="center">
            <td>
                <input type="button" name="number" id="0" value="0"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add(0)">
                <input    type="button" name="calbtn" id="+/-" value="+/-"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="Abs()">
                <input type="button" name="calbtn" id="." value="."
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="add('.')">
                <input    type="button" name="op" id="/" value="/"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="operator('/')">
                <input type="button" name="calbtn" id="tan" value="tan"
                    style="width: 40px; height: 20px; background-color: #fbafaf" onclick="Tan()">
            </td>
        </tr>
    </table>
</body>
</html>
cs



저작자표시 비영리 변경금지

'Web > HTML5&CSS&JavaScript' 카테고리의 다른 글

[JavaScript] 회원가입 유효성검사  (0) 2018.10.22
[JavaScript] 자바스크립트(js) push, shift, pop, sort, reverse 함수  (0) 2018.10.19
[JavaScript]자바스크립트를 이용한 배경색 변경하기  (0) 2018.10.19

티스토리툴바