openSource3/calculator.html at master · MJBJ/openSource3 · GitHub

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
<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <style>
            caption{font-size: 32px;}
            table{width: 320px;}
            table, th{background: #333}
            th{
                padding-right: 10px;
                height: 80px;
            }
            td{
                height:75px;
                text-align: center;
            }
            th>input{
                width: 100%;
                border: none;
                background: #333; color:white;
                text-align:right; font-size: 48px;
            }
            td>input[type="button"]{
                width: 100%; height:inherit;
                color: #333; font-size: 36px;
                border: none;
            }
            td>input[type="button"]:hover{
                background: #999;
            }
            td:last-child > input{
                background: orange; color: white;
            }
            </style>
    </head>
<body>

<p>

<input type="text" id="num1" size="10" value=""> //첫번째 수

<select class="op" id="op"> //option 선택창

<option value='plus'>+</option>

<option value='sub'>-</option>

<option value='mul'>*</option>

<option value='div'>/</option></select>

<input type="text" id="num2" size="10" value=""> = <input type="text" id="num3" size="10" value="" readonly="readonly">

<input type="button" value="send" onclick="total()"> //계산 버튼

</p>

</body>


첫번째 칸과 두번째 칸에 계산할 수를 쓴 후 연산기호를 선택한다. 그런 다음 send버튼을 누르면 total()함수가 호출된다.


<script type="text/javascript"> //JavaScript 부분을 HTML의 <head>사이에 삽입한다.

function total() //total()함수 부분

{

  var num1=document.getElementById("num1"); //<body>부분에서 num1변수를 getElementById를 이용하여 값을 가져온다.

  var num1s=num1.value; // num1에서 가져온 값을 num1s에 저장해주고,

  var num1b=parseInt(num1s); // 계산을 하기위해 그 값을 int형으로 바꿔준다.

  var num2=document.getElementById("num2"); //위 방법과 같음..

  var num2s=num2.value;

  var num2b=parseInt(num2s);

  var num3t;

  var op=document.getElementById("op"); //역시 op값을 가져오고

  var ops=op.value; //값으로 저장

  switch(ops) //ops의 연산기호에 따라 case를 나눈다.

  {

  case "plus": num3t = num1b + num2b;
  document.getElementById("num3").value=num3t; break;

  // sub(+)

  // mul(-)

  // div(/)


  } //계산한 값을 num3t에 저장한 후, 값을 num3로 가져간다.

}

</script>


</body>
</html>