반응형
같이 만든 계산기. 다음에는 혼자 만들어서 해보는걸로...
<head>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input[type=button] { //계산기 스타일. 모든 input 타입을 button으로 사용한다는 선언.
width: 40px;
height: 40px;
}
</style>
<script type="text/javascript">
//전역변수. 어디서나 사용 가능
let num1 = 0;
let op = "";
function nums(num){
f.t1.value+=num; //f.t1.value 는 모든 num을 받은 값
}
function funOp(o){
op=o; //선택한 연산자를 op에 저장
num1 = parseInt(f.t1.value); // parseInt("123") (문자열 숫자를 정수로 바꿈)
f.t1.value="";
}
function eq(){
let num2 = parseInt(f.t1.value); //숫자로 변환해서 변수 num2에 담음
switch (op){
case "+":
res = num1 + num2;
break;
case "-":
res = num1 - num2;
break;
case "*":
res = num1 * num2;
break;
case "/":
res = num1 / num2;
break;
}
f.t1.value = res;
}
</script>
</head>
<body>
<body>
<h3>계산기</h3>
<form name="f">
<table>
<tr>
<td colspan="4"><input type="text" name="t1"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="nums(1)"></td>
<td><input type="button" value="2" onclick="nums(2)"></td>2
<td><input type="button" value="3" onclick="nums(3)"></td>
<td><input type="button" value="+" onclick = "funOp('+')"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="nums(4)"></td>
<td><input type="button" value="5" onclick="nums(5)"></td>
<td><input type="button" value="6" onclick="nums(6)"></td>
<td><input type="button" value="-" onclick = "funOp('-')"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="nums(7)"></td>
<td><input type="button" value="8" onclick="nums(8)"></td>
<td><input type="button" value="9" onclick="nums(9)"></td>
<td><input type="button" value="*" onclick = "funOp('*')"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="nums(0)"></td>
<td><input type="button" value="C" onclick="javascript:f.t1.value=''"></td>
<td><input type="button" value="=" onclick = "eq()"></td>
<td><input type="button" value="/" onclick = "funOp('/')"></td>
</tr>
</table>
</form>
</body>
</html>
반응형
