![[자바스크립트] 계산기 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fedm7yg%2FbtrL0UGwClP%2FtF1vKbdqrfgT3pwBEV3FvK%2Fimg.png)
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>계산기</title>
<style>
.num{
width: 32px;
}
.op{
width: 30px;
}
.func{
width: 30px;
}
td button:nth-child(-n+3){
color: blue;
}
td button:nth-child(4){
color: lightgreen;
}
td button:nth-child(5){
color: green;
width: 33px;
}
</style>
<script type="text/javascript">
var operator = '';
var number = 0;
var flag = false;
function num(num){ //숫자를 입력했을때 화면에 띄워주는 함수 (String 으로 관리하여 자리수를 편하게 입력)
var value = document.getElementById("text").value;
document.getElementById("text").value = value + num;
}
function point(){ //소수점을 입력하는 함수 입력된 값에 .이 있으면 소수점을 입력하지 않는다
var value = document.getElementById("text").value;
if(String(value).includes(".")){return}
document.getElementById("text").value = value + '.';
}
function abs(){ //부호를 바꿔주는 함수 버튼을 누를때마다 -1을 곱하여 부호를 바꿔준다
var value = document.getElementById("text").value;
document.getElementById("text").value = -1 * value;
}
function cal(op){ //연산자를 입력받는 함수 바로 전 입력이 연산자였다면 다시 입력을 받지않음
if(flag){
document.getElementById("text").value = null;
return }
number = document.getElementById("text").value;
operator = op;
document.getElementById("text").value = null;
flag = true;
}
function equal(){ // = 연산자를 눌러 계산하는 함수. 연산자를 판단하고 계산 실행
number = parseInt(number);
if(operator === "+"){
document.getElementById("text").value = number + parseInt(document.getElementById("text").value);}
else if(operator === "-"){
document.getElementById("text").value = number - parseInt(document.getElementById("text").value);}
else if(operator === "*"){
document.getElementById("text").value = number * parseInt(document.getElementById("text").value);}
else if(operator === "/"){
document.getElementById("text").value = number / parseInt(document.getElementById("text").value);}
else if(operator === "^"){
document.getElementById("text").value = number ** parseInt(document.getElementById("text").value);}
flag = false;
}
function tri(op){ //삼각함수를 계산하는 함수
number = document.getElementById("text").value;
if(op === "sin"){
document.getElementById("text").value = Math.sin(number * Math.PI / 180);}
else if(op === "cos"){
document.getElementById("text").value = Math.cos(number * Math.PI / 180);}
else if(op === "tan"){
document.getElementById("text").value = Math.tan(number * Math.PI / 180);}
}
</script>
</head>
<body>
<div align="left">
<input type="text" id="text" placeholder="0" style="text-align:right; width:200px;"><br>
<form >
<button style="width : 80px; " value="Clear" onclick="">Clear</button>
<input style="width : 80px;" type="button" value="=" onclick="equal()"><br>
</form>
</div>
<table>
<tr>
<td>
<button class="num" onclick="num(1)">1</button>
<button class="num" onclick="num(2)">2</button>
<button class="num" onclick="num(3)">3</button>
 
 
<button class="op" onclick="cal('+')" type="submit">+</button>
 
<button class="func" onclick="cal('^')" type="submit">x^y</button>
</td>
</tr>
<tr>
<td>
<button class="num" onclick="num(4)" type="submit">4</button>
<button class="num" onclick="num(5)" type="submit">5</button>
<button class="num" onclick="num(6)" type="submit">6</button>
 
 
<button class="op" onclick="cal('-')" type="submit">-</button>
 
<button class="func" onclick="tri('sin')" type="submit">sin</button>
</td>
</tr>
<tr>
<td>
<button class="num" onclick="num(7)" type="submit">7</button>
<button class="num" onclick="num(8)" type="submit">8</button>
<button class="num" onclick="num(9)" type="submit">9</button>
 
 
<button class="op" onclick="cal('*')" type="submit">*</button>
 
<button class="func" onclick="tri('cos')" type="submit">cos</button>
</td>
</tr>
<tr>
<td>
<button class="num" onclick="num(0)" type="submit">0</button>
<button class="num" onclick="abs()" type="submit">+/-</button>
<button class="num" onclick="point()" type="submit">.</button>
 
 
<button class="op" onclick="cal('/')" type="submit">/</button>
 
<button class="func" onclick="tri('tan')" type="submit">tan</button>
</td>
</tr>
</table>
</body>
</html>반응형
'Web' 카테고리의 다른 글
| [JSP] include 액션 태그를 이용한 페이지 이동 (중복된 공간) (1) | 2022.09.16 |
|---|---|
| http 주요 에러코드 (0) | 2022.09.15 |
| HTTP 와 HTTPS 의 차이 (4) | 2022.09.15 |
| [자바스크립트] 회원가입페이지 정규표현식X (0) | 2022.09.14 |
| [자바스크립트] 회원가입 페이지 만들기 (정규표현식O) (0) | 2022.09.14 |