반응형
javascript 예제 - 계산기 / javascript 계산기 / javascript 연습문제
자바스크립트 연습할 겸 예제로 만든 간단한 계산기
문제 아이디어는 이 분 것을 참고
https://sourcestudy.tistory.com/210?category=194956
1. 간단 버전
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>계산기</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h1>Calculator1</h1>
숫자1 : <input type="text" id="number1">
숫자2 : <input type="text" id="number2">
<br><br>
연산 : <input type="radio" name="chk_info" value="plus" checked>+
<input type="radio" name="chk_info" value="minus">-
<input type="radio" name="chk_info" value="gop">*
<input type="radio" name="chk_info" value="nanugi">/
<br><br>
결과 : <input type="text" id="resultNum" readonly/>
<br><br>
<input type="button" value="계산" name="go" onclick="goFunc()">
<input type="button" value="취소" name="cancel">
<script>
function goFunc(){
var num1 = number1.value;
var num2 = number2.value;
var buho = document.querySelector('input[name="chk_info"]:checked').value;
var result;
if(buho =='plus'){
result = parseInt(num1)+parseInt(num2);
alert(result);
document.getElementById("resultNum").value = result;
} else if(buho=='minus') {
result = parseInt(num1)-parseInt(num2);
alert(result);
document.getElementById("resultNum").value = result;
} else if(buho=='gop') {
result = parseInt(num1)*parseInt(num2);
alert(result);
document.getElementById("resultNum").value = result;
} else {
result = parseInt(num1)/parseInt(num2);
alert(result);
document.getElementById("resultNum").value = result;
}
}
</script>
</body>
</html>
2. 리팩토링, night & day 모드 버튼 추가
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>계산기</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h1>Calculator 01
<input type="button" value="Night" id="chgcolor" onclick="changeColor()">
</h1>
숫자1 : <input type="text" id="number1">
숫자2 : <input type="text" id="number2">
<br><br>
연산 : <input type="radio" name="chk_info" value="plus" checked>+
<input type="radio" name="chk_info" value="minus">-
<input type="radio" name="chk_info" value="gop">*
<input type="radio" name="chk_info" value="nanugi">/
<br><br>
결과 : <input type="text" id="resultNum" readonly/>
<br><br>
<input type="button" value="계산" name="go" onclick="goFunc()">
<input type="button" value="취소" name="cancel">
<script>
function goFunc(){
var num1 = number1.value;
var num2 = number2.value;
var buho = document.querySelector('input[name="chk_info"]:checked').value;
var result;
if(buho =='plus'){
result = parseInt(num1)+parseInt(num2);
resultPresetation(result);
} else if(buho=='minus') {
result = parseInt(num1)-parseInt(num2);
resultPresetation(result);
} else if(buho=='gop') {
result = parseInt(num1)*parseInt(num2);
resultPresetation(result);
} else {
result = parseInt(num1)/parseInt(num2);
resultPresetation(result);
}
}
function resultPresetation(result){
alert(result);
document.getElementById("resultNum").value = result;
}
function changeColor(){
if(document.getElementById('chgcolor').value=="Night"){
document.querySelector('body').style.color="powderblue";
document.querySelector('body').style.backgroundColor="black";
document.getElementById('chgcolor').value="Day";
} else {
document.querySelector('body').style.color="black";
document.querySelector('body').style.backgroundColor="white";
document.getElementById('chgcolor').value="Night";
}
}
</script>
</body>
</html>반응형
'공부 > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 if ...else 문을 3항 연산자로 바꾸기 (0) | 2019.12.20 |
|---|---|
| [JavaScript] 자바스크립트 템플릿 문자열이란? (0) | 2019.12.20 |
| [JavaScript] 내 맘대로 주사위 게임 예제 (0) | 2019.12.04 |
| [js공부] paper.js 예제 (0) | 2019.11.29 |
| Front end (프론트엔드) 공부 로드맵 (0) | 2019.11.27 |