소스 결과 : http://dowob.wo.tc/calcu.html
Math 함수를 이용하여 간단하게 계산기를 만들어 보았습니다!
<html>
<head>
<title>계산기</title>
<style type="text/css">
.btn
{
width:35px;
height:25px;
text-align:center;
}
.btn2
{
width:100px;
height:25px;
text-align:center;
}
.numeric
{
color:#0000FF;
}
.operator
{
color:#00FF00;
}
.function
{
color:#FF0000;
}
.input
{
text-align:right;
}
</style>
<script language="javascript">
var num1 = 0, num2 = 0;
var operator="";
varobjInput=null;
var flag=0;
window.onload=function()
{
objInput=document.getElementById("inputBox");
objInput.value="0";
}
function buttonclick(objButton)
{
var value=objButton.value;
switch(value)
{
case"1":
case"2":
case"3":
case"4":
case"5":
case"6":
case"7":
case"8":
case"9":
if(objInput.value=="0" || flag==1) objInput.value="";
objInput.value+=value;
flag=0;
break;
case"0":
if(objInput.value=="0") break;
objInput.value+=value;
flag=0;
break;
case"+/-":
if(objInput.value=="0") break;
if(objInput.value.charAt(0)=='-')
{
objInput.value=objInput.value.substr(1);
}
else
{
objInput.value="-"+objInput.value;
}
break;
case".":
objInput.value+=".";
break;
}
}
function operation(objButton)
{
var op=objButton.value;
operator=op;
num2=0;
if(objInput.value.indexOf(".")>=0)
{
num1=parseFloat(objInput.value);
}
else
{
num1=parseInt(objInput.value);
}
flag=1;
}
function func(objButton)
{
var op=objButton.value;
if(op=="x^y")
{
operator=op;
if(objInput.value.indexOf(".")>=0)
{
num1-parseFloat(objInput.value);
}
else
{
num1=parseInt(objInput.value);
}
num2=0;
flag=1;
return;
}
switch (op)
{
case "sin":
var temp=(objInput.value.indexOf(".")>=0) ? parseFloat(objInput.value):parseInt(objInput.value);
objInput.value=Math.sin(temp);
break;
case "cos":
var temp=(objInput.value.indexOf(".")>=0) ? parseFloat(objInput.value):parseInt(objInput.value);
objInput.value=Math.cos(temp);
break;
case "tan":
var temp=(objInput.value.indexOf(".")>=0) ? parseFloat(objInput.value):parseInt(objInput.value);
objInput.value=Math.tan(temp);
break;
}
}
function calc()
{
if(num2==0)
{
if(objInput.value.indexOf(".")>=0)
{
num2=parseFloat(objInput.value);
}
else
{
num2=parseInt(objInput.value);
}
}
switch(operator)
{
case "+":
num=num1+num2;
break;
case "-":
num=num1-num2;
break;
case "*":
num=num1*num2;
break;
case "/":
num=num1/num2;
break;
case "x^y":
objInput.value=Math.pow(num1,num2);
num1=0;
num2=0;
operator="";
flag=0;
return;
}
objInput.value=num;
}
function init()
{
num1=0;
num2=0;
operator="";
flag=0;
objInput.value="0";
}
</script>
</head>
<body>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td colspan="3">
<input type="text" id="inputBox" size=30 class="input" readonly>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="Clear" class="btn2 numeric" onclick="init()">
<input type="button" value="=" class="btn2 numeric" onclick="calc()">
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td><input type="button" value="1" onclick="buttonclick(this)" class="btn numeric"></td>
<td><input type="button" value="2" onclick="buttonclick(this)" class="btn numeric"></td>
<td><input type="button" value="3" onclick="buttonclick(this)" class="btn numeric"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="buttonclick(this)" class="btn numeric"></td>
<td><input type="button" value="5" onclick="buttonclick(this)" class="btn numeric"></td>
<td><input type="button" value="6" onclick="buttonclick(this)" class="btn numeric"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="buttonclick(this)" class="btn numeric"></td>
<td><input type="button" value="8" onclick="buttonclick(this)" class="btn numeric"></td>
<td><input type="button" value="9" onclick="buttonclick(this)" class="btn numeric"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="buttonclick(this)" class="btn numeric"></td>
<td><input type="button" value="+/-" onclick="buttonclick(this)" class="btn numeric"></td>
<td><input type="button" value="." onclick="buttonclick(this)" class="btn numeric"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td><input type="button" value="+" onclick="operation(this)" class="btn operator"></td>
</tr>
<tr>
<td><input type="button" value="-" onclick="operation(this)" class="btn operator"></td>
</tr>
<td><input type="button" value="*" onclick="operation(this)" class="btn operator"></td>
<tr>
<td><input type="button" value="/" onclick="operation(this)" class="btn operator"></td>
</tr>
</table>
<td>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td><input type="button" value="x^y" onclick="func(this)" class="btn function"></td>
</tr>
<tr>
<td><input type="button" value="sin" onclick="func(this)" class="btn function"></td>
</tr>
<tr>
<td><input type="button" value="cos" onclick="func(this)" class="btn function"></td>
</tr>
<tr>
<td><input type="button" value="tan" onclick="func(this)" class="btn function"></td>
</tr>
</body>
</html>
'진주의 배설물 > 웹' 카테고리의 다른 글
| [PHP] 특정 아이피 차단 (0) | 2012.02.03 |
|---|