html 계산기 만들기
- 프로그래밍/웹사이트
- 2019. 8. 25.
HTML 계산기 만들기
안녕하세요.
오늘은 심심해서 HTML+자바스크립트+css조금으로 계산기를 만들어봤습니다.
- html 계산기
- 코드
HTML로 만든 계산기
심심해서 HTMl로 계산기를 한번 만들어봤습니다.
윈도우10의 기본 계산기를 참고해서 만들었습니다.
대충 이렇게 생겼습니다.
코드를 살짝 바꿔서 글에다가 심어놓았으니 아마 작동할 겁니다.
| +- | 루트 | 제곱 | 1/X |
| CE | C | < | ÷ |
| 7 | 8 | 9 | X |
| 4 | 5 | 6 | - |
| 1 | 2 | 3 | + |
| 0 | . | = | |
코드
코드를 보면 길기만 하지 어렵진 않습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>계산기</title>
<style>
body{
text-align: center;
}
input{
text-align: right;
}
input:focus{
outline:none;
}
</style>
<script>
var showresult;
var num=1; //몇번째 결과값인지 확인하기 위한 변수
function send(data) {// 버튼을 누르면 데이터를 id ouput에 표시함
output.value = output.value + data;
}
function outputclear(){// output의 데이터를 지움.
output.value="";
}
function allclear(){// output input의 데이터를 지움.
input.value="";
output.value="";
}
function square(){// 제곱
showresult = Math.pow(output.value,2);
// eval() 문자열을 코드로 인식하게 해줌
output.value=showresult;
}
function swap(){// output의 +-를 바꿔줌(반전)
output.value=-output.value;
}
function tdelete(){// output의 데이터를 하나 지워줌.
output.value = output.value.substring(0, output.value.length-1);
}
function sqrt() {// output의 데이터를 루트.
output.value = Math.sqrt(output.value);
}
function sign(data){// output의 데이터를 부호를 붙여서 input에 넣어줌.
input.value = input.value+output.value + data;
output.value="";
}
function point(){// 1/x계산
output.value="1/"+output.value;
output.value=eval(output.value);
}
function result(){// 결과값 출력 & 계산식, 결과를 기록.
input.value=input.value+output.value;
showresult = eval(input.value);
//eval() 문자열을 코드로 인식하게 해줌
list.value+=num+"번째 계산식"+input.value+"\n";
input.value="";
output.value=showresult;
list.value+=num+"번째 결과"+showresult+"\n";
num++;
}
</script>
</head>
<body>
<!--계산기 -->
<table border="1">
<tr>
<td class="aa" colspan="4"><input type="text" id="input" readonly></td>
</tr>
<tr>
<td colspan="4"><input type="text" id="output" readonly></td>
</tr>
<tr>
<td onclick="swap()">+-</td>
<td onclick="sqrt()">루트</td>
<td onclick="square()">제곱</td>
<td onclick="point()">1/X</td>
</tr>
<tr>
<td onclick="outputclear()">CE</td>
<td onclick="allclear()">C</td>
<td onclick="tdelete()"><</td>
<td onclick="sign('/')">÷</td>
</tr>
<tr>
<td onclick="send(7)">7</td>
<td onclick="send(8)">8</td>
<td onclick="send(9)">9</td>
<td onclick="sign('*')">X</td>
</tr>
<tr>
<td onclick="send(4)">4</td>
<td onclick="send(5)">5</td>
<td onclick="send(6)">6</td>
<td onclick="sign('-')">-</td>
</tr>
<tr>
<td onclick="send(1)">1</td>
<td onclick="send(2)">2</td>
<td onclick="send(3)">3</td>
<td onclick="sign('+')">+</td>
</tr>
<tr>
<td> </td>
<td onclick="send(0)">0</td>
<td onclick="send('.')">.</td>
<td onclick="result()">=</td>
</tr>
<tr>
<td colspan="4"><textarea id="list" rows="40" cols="22"></textarea></td>
</tr>
</table>
</body>
</html>귀찮아서 css는 별로 안 했습니다.
(사실 거의 안한수준.)