<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산기</title>
<style type="text/css">
table
{
background-color: pink;
}
tr
{
text-align: center;
}
input
{
background-color : #B0E0E6;
width: 90px;
height: 90px;
font-size: 40px;
}
#output
{
background-color : #FFFFFF;
text-align : right;
width : 95%;
}
#equal
{
width : 200px;
}
#clear
{
width : 200px;
}
.nullbtn{
border-color : pink;
background-color: pink;
}
</style>
<script type="text/javascript">
var num1=""; // 입력받는 값
var num2=""; // 저장하는 값
var oper=""; // 연산자
function setNum(number) { // 숫자버튼 클릭시
if(number=="+/-"){ // +/- 를 누르면
num1*=-1; // 양수ㆍ음수 변환
}else if(number=="." && num1==""){ // . 입력시 num1 값이 없을 때
num1="0.";
}else{
num1+=number; // 값을 입력
}
document.getElementById("output").value = num1; // num1의 현재 값을 출력
}
function setOperator(op){
oper=op; // 연산자 값 대입
num2 = num1; // num2에 num1을 주입
num1 = ""; // num1 초기화
document.getElementById("output").value="0"; // 출력부 초기화
}
function clearAll() { // Clear
num1=""; // 첫 번째 숫자 초기화
num2=""; // 두 번째 숫자 초기화
oper="";
f1.reset(); // form 초기화
}
function answer(){ // (=) 클릭시
// float 형변환
var n1 = parseFloat(num1);
var n2 = parseFloat(num2);
// 결과값이 나오고 이어서 계산하기 위해서 num1에 값을 넣어줌
switch(oper){ // 연산자에 따라 계산
case "+" : // 더하기
num1 = n2+n1;
break;
case "-" : // 빼기
num1 = n2-n1;
break;
case "*" : // 곱하기
num1 = n2*n1;
break;
case "/" : // 나누기
num1 = n2/n1;
break;
case "X^Y" : // 제곱
num1 = Math.pow(n2, n1);
break;
case "sin" : // sin
num1 = Math.sin(n2, n1);
break;
case "cos" : // cos
num1 = Math.cos(n2, n1);
break;
case "tan" : // tan
num1 = Math.tan(n2, n1);
break;
}
document.getElementById("output").value = num1; // 답 출력
}
</script>
</head>
<body>
<form id="f1">
<table>
<tr>
<td colspan="6"><input type="text" id="output" value="0"></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="Clear" onclick="clearAll()" id="clear"></td>
<td colspan="3"><input type="button" value="=" onclick="answer()" id="equal"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="setNum(this.value)"></td>
<td><input type="button" value="2" onclick="setNum(this.value)"></td>
<td><input type="button" value="3" onclick="setNum(this.value)"></td>
<td><input type="button" class="nullbtn" disabled="disabled"></td>
<td><input type="button" value="+" onclick="setOperator(this.value)"></td>
<td><input type="button" value="X^Y" onclick="setOperator(this.value)"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="setNum(this.value)"></td>
<td><input type="button" value="5" onclick="setNum(this.value)"></td>
<td><input type="button" value="6" onclick="setNum(this.value)"></td>
<td><input type="button" class="nullbtn" disabled="disabled"></td>
<td><input type="button" value="-" onclick="setOperator(this.value)"></td>
<td><input type="button" value="sin" onclick="setOperator(this.value)"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="setNum(this.value)"></td>
<td><input type="button" value="8" onclick="setNum(this.value)"></td>
<td><input type="button" value="9" onclick="setNum(this.value)"></td>
<td><input type="button" class="nullbtn" disabled="disabled"></td>
<td><input type="button" value="*" onclick="setOperator(this.value)"></td>
<td><input type="button" value="cos" onclick="setOperator(this.value)"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="setNum(this.value)"></td>
<td><input type="button" value="+/-" onclick="setNum(this.value)"></td>
<td><input type="button" value="." onclick="setNum(this.value)"></td>
<td><input type="button" class="nullbtn" disabled="disabled"></td>
<td><input type="button" value="/" onclick="setOperator(this.value)"></td>
<td><input type="button" value="tan" onclick="setOperator(this.value)"></td>
</tr>
</table>
</form>
</body>
</html>반응형
'Java > eclipse 연습' 카테고리의 다른 글
| (Java)JSP 빈즈를 이용한 회원가입폼(DB x) (0) | 2020.08.28 |
|---|---|
| (Java)계산기 Servlet version (0) | 2020.08.25 |
| (JavaScript)현재 시간(1초마다 갱신) (0) | 2020.08.20 |
| (Java)Thread Synchronization - ATM (0) | 2020.08.13 |
| (Java)동적바인딩 예제 (0) | 2020.08.11 |
