계산기 활용 예
완성된 계산기 입니다 사용해 보세요
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.calculator {
border: solid 2px;
width: 180px;
}
input {
margin: 5px;
}
</style>
</head>
<body>
<h1>계산기 활용 예</h1>
<div class="calculator">
<input type="text" id="resultFld">
<br>
<input type="button" value="7" onclick="btn_click(7)">
<input type="button" value="8" onclick="btn_click(8)">
<input type="button" value="9" onclick="btn_click(9)">
<input type="button" value="/" onclick="cal('/')">
<br>
<input type="button" value="4" onclick="btn_click(4)">
<input type="button" value="5" onclick="btn_click(5)">
<input type="button" value="6" onclick="btn_click(6)">
<input type="button" value="*" onclick="cal('*')">
<br>
<input type="button" value="1" onclick="btn_click(1)">
<input type="button" value="2" onclick="btn_click(2)">
<input type="button" value="3" onclick="btn_click(3)">
<input type="button" value="-" onclick="cal('-')">
<br>
<input type="button" value="0" onclick="btn_click(0)">
<input type="button" value="." onclick="btn_click('.')">
<input type="button" value="+" onclick="cal('+')">
<input type="button" value="%" onclick="cal('%')">
<br>
<input type="button" value="계산하기" onclick="compute()">
<input type="button" value="지우기" onclick="clear_del()">
</div>
<script>
var num =0 ;
var symbol ;
function btn_click (a) {
resultFld.value += a;
}
function cal(b) {
var firstNum = (document.getElementById("resultFld").value);
num = firstNum;
symbol = b ;
return document.getElementById("resultFld").value = "";
}
function compute () {
var secNum = parseFloat(document.getElementById("resultFld").value);
var result ;
switch (symbol) {
case '+' : result = Number(num) + Number(secNum) ;
document.getElementById("resultFld").value = result;
break;
case '-' : result = Number(num) - Number(secNum) ;
document.getElementById("resultFld").value = result;
break;
case '*' : result = Number(num) * Number(secNum) ;
document.getElementById("resultFld").value = result;
break;
case '/' : result = Number(num) / Number(secNum) ;
document.getElementById("resultFld").value = result;
break;
case '%' : result = Number(num) % Number(secNum) ;
document.getElementById("resultFld").value = result;
break;
}
}
function clear_del() {
document.getElementById("resultFld").value = "";
num = 0;
}
</script>
</body>
</html>디자인을 전혀 신경 안쓰고 만들었더니 결과물이 보기가 안좋네요 ㅎㅎㅎ
꽤나 오랜 시간 걸려 만든 계산기 ㅜㅜ
switch 반복문을 활용해 구현해 보았습니다
'공부 > JS , HTML , CSS' 카테고리의 다른 글
| [javascript/jqeury] 세로메뉴, 메뉴 클릭시 서브메뉴 열기 (0) | 2021.05.03 |
|---|---|
| [javascript] table tr 복사(clone()), tr의 td삭제하기, 버튼 클릭 시 테이블 합치기(rowspan), 삭제버튼, class 이름바꿔서 추가하기 (2) | 2021.03.04 |
| [javascript] select 옵션 선택마다 다른 사진 출력 (0) | 2021.02.28 |
| [javascript, jquery] 달력 만들기 (윤년적용, 오늘 날짜 표시, 이전달 다음달 버튼 구현) (0) | 2021.02.28 |
