반응형
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 |