// script 부분
var numberPrev = false; // 이전값이 숫자인지 연산자인지
function findButton(char){
if(document.getElementById("txt").value == 0){
// clear후 텍스트박스 초기값이 0이면 버튼 눌렀을때 0을 지우고 시작.
document.getElementById("txt").value = "";
}
if(numberPrev == false){
if(isNaN(char)==true){ // isNaN은 숫자가 아니면 true를 반환
}
else{ // 문자가 아니라면
document.getElementById("txt").value += char;
}
}
else{ // 이전에 숫자를 입력했으면
if(char == '^')
{
document.getElementById("txt").value += '**';
}
else{
document.getElementById("txt").value += char;
}
}
if(isNaN(char) == true){ // 들어온 문자가 숫자가 아닌 문자라면
numberPrev = false;
}
else{ // 숫자라면
numberPrev = true; // 이전값이 숫자면
}
}
function reset(){
var txt = document.getElementById("txt").value = 0;
}
function operation(){
var txt = document.getElementById("txt");
var tf = false;
var mm = txt.value.split("^");
var oper = eval(txt.value);
txt.value = oper;
}
function mathop(char){
var txt = document.getElementById("txt");
if(txt.value == ""){
return
}
switch(char){
// case 'x^y'
case "_^":
txt.value = txt.value + char;
break;
case "_sin":
txt.value = Math.sin(parseInt(txt.value));
break;
case "_cos":
txt.value = Math.cos(parseInt(txt.value));
break;
case "_tan":
txt.value = Math.tan(parseInt(txt.value));
break;
}
}
function changInt(){
var txt = document.getElementById("txt");
if(txt.value < 0){
txt.value = Math.abs(parseInt(txt.value));
}
else{
txt.value = '-' + txt.value;
}
}
// html 부분
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>계산기</title>
<!-- css 로드 -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- script 로드 -->
<script type ="text/javascript" src="script.js"></script>
</head>
<body>
<main>
<input id = "txt" type="text" size=37 style = "text-align:right;">
<br><br>
<div class = "top">
<button onclick = "reset()">Clear</button>
<button onclick = "operation()">=</button>
</div>
<br>
<div class = "button-l" >
<button type="button" onclick="findButton(1)">1</button>
<button onclick="findButton(2)">2</button>
<button onclick="findButton(3)">3</button>
<button onclick="findButton('+')">+</button>
<button onclick="findButton('^')">x^y</button>
<button onclick="findButton(4)">4</button>
<button onclick="findButton(5)">5</button>
<button onclick="findButton(6)">6</button>
<button onclick="findButton('-')">-</button>
<button onclick="mathop('_sin')">sin</button>
<button onclick="findButton(7)">7</button>
<button onclick="findButton(8)">8</button>
<button onclick="findButton(9)">9</button>
<button onclick="findButton('*')">*</button>
<button onclick="mathop('_cos')">cos</button>
<button onclick="changInt()">+/-</button>
<button onclick="findButton(0)">0</button>
<button onclick="findButton('.')">.</button>
<button onclick="findButton('/')">/</button>
<button onclick="mathop('_tan')">tan</button>
</div>
</main>
</body>
</html>
// css 부분
main{
width:300px;
}
.button-l{
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(5,1fr);
}
.top{
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(2,1fr);
}
반응형
'자바과정 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 회원가입 지도 API 사용 (0) | 2021.03.04 |
|---|---|
| 회원가입 유효성 검사 (비정규식과 정규식) (0) | 2021.03.04 |
| 카카오 우편번호 서비스 API (0) | 2021.03.04 |
| 자바스크립트 기초 2일차 (0) | 2021.03.02 |
| 자바스크립트 기초 1일차 (0) | 2021.02.26 |
댓글