아래 모양과 같이 계산기를 만들어 보았다.
이번 계산기 만들기에서 중요한 것은 누른 버튼의 기능을 스크립트의 함수로 구현하는 것이다.
[결과]
[소스코드]
<html>
<head>
<title>calculator</title>
<style>
input{margin: 5px;}
</style>
<script lnaguage="javascript">
let num1; //ex) a + b 에서 a를 저장하는 역할
let ari; //ex) a + b 에서 +(기호)를 저장하는 역할
let output; //출력값 저장
let flag = false; //깃발을 boolean으로 설정하여 계산할 기호가 있는지 없는지 판단
let radian = 180 * Math.PI / 180;
//출력해주는 부분
function onClickNum(self){
output = document.getElementById("output");
if(flag == false){
if(output.value==0){
output.value = self.value;
}
else{
output.value =output.value +self.value;
}
}else{
output.value=''
output.value =output.value +self.value;
flag = false;
}
}
//산수 저장
function arithmetic(self){
ari = self.value
num1 = output.value
flag=true;
}
//결과값 출력
function equal(){
output = document.getElementById("output");
if(ari == "+"){
output.value=Number(num1) + Number(output.value);
}
else if(ari == "-"){
output.value=Number(num1) - Number(output.value);
}
else if(ari == "*"){
output.value = Number(num1) * Number(output.value);
}
else if(ari == "/"){
output.value = Number(num1) / Number(output.value);
}
else if(ari == "x^y"){
output.value = Number(num1) ** Number(output.value);
}
if(ari=="sin"){
output.value = Math.sin(output.value);
}
else if(ari =="cos"){
output.value =Math.cos(output.value);
}
else if(ari=="tan"){
output.value=Math.tan(output.value);
}
}
function change(){
if(Number(output.value)>0){
output.value = "-"+output.value;
}
else{
let box = -1*Number(output.value)
output.value = box.toString();
}
}
function onClear(){
output = document.getElementById("output");
output.value="0";
num1 = "";
ari = "";
flag= false;
}
</script>
</head>
<body>
<table>
<tr>
<input type = "text" id = "output" value ="0" style="width:240px;height: 30px; text-align:right;" ><br>
<input type = "button" id="clear" value ="Clear" onclick="onClear()" style="color:blue; width:115px; height: 30px;" >
<input type = "button" id="equal" value =" = " onclick="equal()"style="color:blue; width:115px; height: 30px;"><br>
<input type = "button" id="1" name ="num" value="1" onclick="onClickNum(this)" style="color:blue;width:40px;height:30px">
<input type = "button" id="2" name ="num" value="2" onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="3" name ="num" value="3" onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="+" name ="fun" value="+" onclick="arithmetic(this)"style="color:yellow;width:40px;height:30px">
<input type = "button" id="x^y" value="x^y"onclick="arithmetic(this)"style="color:red;width:40px;height:30px"><br>
<input type = "button" id="4" name ="num" value="4" onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="5" name ="num" value="5" onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="6" name ="num" value="6" onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="-" name ="fun" value="-" onclick="arithmetic(this)"style="color:yellow;width:40px;height:30px">
<input type = "button" id="sin" value="sin"onclick="arithmetic(this)"style="color:red;width:40px;height:30px"><br>
<input type = "button" id="7" name ="num" value="7" onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="8" name ="num" value="8" onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="9" name ="num" value="9" onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="*" name ="fun" value="*" onclick="arithmetic(this)"style="color:yellow;width:40px;height:30px">
<input type = "button" id="cos" value="cos" onclick="arithmetic(this)"style="color:red;width:40px;height:30px"><br>
<input type = "button" id="0" name ="num" value="0" onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="+/-" value="+/-"onclick="change()"style="color:blue;width:40px;height:30px">
<input type = "button" id="." value="."onclick="onClickNum(this)"style="color:blue;width:40px;height:30px">
<input type = "button" id="/" name ="fun" value="/" onclick="arithmetic(this)"style="color:yellow;width:40px;height:30px">
<input type = "button" id="tan" value="tan"onclick="arithmetic(this)"style="color:red;width:40px;height:30px">
</table>
</body>
</html>'JavaScript > 바닐라.js' 카테고리의 다른 글
| 자바스크립트를 이용한 구글로 로그인 하기 (1) | 2022.11.09 |
|---|---|
| 회원가입 페이지 만들기 (정규표현식 미사용) (0) | 2022.09.14 |
| 회원가입 페이지 만들기 (정규표현식 사용) (0) | 2022.09.14 |
| 실시간 가져오기[JavaScript] (0) | 2022.09.13 |
| 글자 변환 (0) | 2022.09.08 |