티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<title>calc</title>
<script type="text/javascript">
var num1; //제곱을 위한 지역변수 지정
var num2; //제곱을 위한 지역변수 지정
var temp; //제곱 연산기호
function math(value){ //연산
var objValue = document.getElementById("n");
objValue.value += value;
}
function sign(value){ //sin, cos, tan
var objValue = document.getElementById("n");
switch(value){
case "sin" :
objValue.value = Math.sin(objValue.value);
break;
case "cos" :
objValue.value = Math.cos(objValue.value);
break;
case "tan" :
objValue.value = Math.tan(objValue.value);
break;
}
}
function square(value){ //제곱
var objValue = document.getElementById("n");
temp = value;
num1 = objValue.value;
objValue.value=""; //제곱 기호를 누르면 숫자가 지워짐
}
function swap(){ //+/-
var objValue = document.getElementById("n");
objValue.value =- objValue.value; //-기호
}
function getResult(){ //출력
var objValue = document.getElementById("n");
num2 = objValue.value;
if(temp == "^")
objValue.value = Math.pow(num1, num2);
else
objValue.value = eval(num1 + temp + num2);
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td colspan="2">
<input type="text" id="n">
</td>
</tr>
<tr align="center">
<td>
<input style="width: 60pt" type="reset" value="Clear">
</td>
<td align="center">
<input style="width: 60pt" type="button" value="=" onclick="getResult()">
</td>
</tr>
<tr>
<td>
<input style="width: 20pt" type="button" id="1" value="1" onclick="math(this.value)">
<input style="width: 20pt" type="button" id="2" value="2" onclick="math(this.value)">
<input style="width: 20pt" type="button" id="3" value="3" onclick="math(this.value)">
</td>
<td>
<input style="width: 20pt" type="button" id="+" value="+" onclick="math(this.value)">
<input style="width: 25pt" type="button" id="x^y" value="^" onclick="square(this.value)">
</td>
</tr>
<tr>
<td>
<input style="width: 20pt" type="button" id="4" value="4" onclick="math(this.value)">
<input style="width: 20pt" type="button" id="5" value="5" onclick="math(this.value)">
<input style="width: 20pt" type="button" id="6" value="6" onclick="math(this.value)">
</td>
<td>
<input style="width: 20pt" type="button" id="-" value="-" onclick="math(this.value)">
<input style="width: 25pt" type="button" id="sin" value="sin" onclick="sign(this.value)">
</td>
</tr>
<tr>
<td>
<input style="width: 20pt" type="button" id="7" value="7" onclick="math(this.value)">
<input style="width: 20pt" type="button" id="8" value="8" onclick="math(this.value)">
<input style="width: 20pt" type="button" id="9" value="9" onclick="math(this.value)">
</td>
<td>
<input style="width: 20pt" type="button" id="*" value="*" onclick="math(this.value)">
<input style="width: 25pt" type="button" id="cos" value="cos" onclick="sign(this.value)">
</td>
</tr>
<tr>
<td>
<input style="width: 20pt" type="button" id="0" value="0" onclick="math(this.value)">
<input style="width: 20pt" type="button" id="+/-" value="+/-" onclick="swap()">
<input style="width: 20pt" type="button" id="." value="." onclick="math(this.value)">
</td>
<td>
<input style="width: 20pt" type="button" id="/" value="/" onclick="math(this.value)">
<input style="width: 25pt" type="button" id="tan" value="tan" onclick="sign(this.value)">
</td>
</tr>
</table>
</form>
</body>
</html>'LANGUAGE > JAVA SCRIPT' 카테고리의 다른 글
| [JAVA SCRIPT] 회원가입 유효성 검사 (0) | 2018.04.08 |
|---|---|
| [JAVA SCRIPT] 만년 달력 (0) | 2018.04.05 |
| [JAVA SCRIPT] 배열 관련 객체 (0) | 2018.04.05 |
| [JAVA SCRIPT] ALERT( ) (0) | 2018.04.05 |
| [JAVA SCRIPT] 배경 색깔 바꾸기 (0) | 2018.04.05 |
댓글