HTML + 자바스크립트 시간에 만든 계산기!
위의 그림처럼 생긴 계산기를 만들어 볼 건데요. 주목할 점은, Table을 사용한 모습의 계산기라는 것입니다.
Body에 테이블을 먼저 만들어주고, Script에 함수를 만들어 입력값을 출력하고 버튼에 해당하는 처리 함수를 만들어줘요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>계산기</title>
<script>
function addInput(b) // 숫자나 기호가 불려지면 그대로 화면에 출력
{
let lcd = document.getElementById("lcd");
if(lcd.value=="0") // 단순 초기값인 경우
{
lcd.value=b;
}
else
{
lcd.value += b; // 출력창에 버튼의 문자 덧붙임
}
}
function backward() // back 버튼에 대한 처리 함수
{
let lcd = document.getElementById("lcd");
let len = lcd.value.length;
if(len == 0)
{
return;
}
else
{
lcd.value = lcd.value.substr(0, len-1); // 처음부터 하나 작은 값의 value를 lcd.value에 넣어줌
// 계산기에서 컴퓨터가 실제로 입력값을 지우는게 아니라 마지막 입력값을 뺀 나머지 값을 보여준다.
}
}
function calculate()
{
let lcd = document.getElementById("lcd");
lcd.value = eval(lcd.value);
}
function clearLcd()
{
let lcd = document.getElementById("lcd");
lcd.value = "0";
}
</script>
<style>
table
{
text-align: center;
border: 0;
width: 300px;
}
tr
{
text-align: center;
}
td
{
width: 80px;
}
input[type=button]
{
width: 60px;
}
</style>
</head>
<body>
<h3>계산기</h3>
<hr>
<form name = "cal">
<table>
<tr>
<td colspan = 4><input type = "text" id = "lcd" value = "0" size="50"></td> <!--lcd 입력받는 값-->
</tr>
<tr>
<td><input type="button" id="back" value="BACK" onclick="backward()"></td>
<td><input type="button" id="ce" value="CE" onclick="clearLcd()"></td>
<td><input type="button" id="c" value="C" onclick="clearLcd()"></td>
<td><input type="button" id="equals" value="=" onclick="calculate()"></td>
</tr>
<tr>
<td><input type="button" id="seven" value="7" onclick="addInput(this.value)"></td>
<td><input type="button" id="eight" value="8" onclick="addInput(this.value)"></td>
<td><input type="button" id="nine" value="9" onclick="addInput(this.value)"></td>
<td><input type="button" id="divide" value="/" onclick="addInput(this.value)"></td>
</tr>
<tr>
<td><input type="button" id="four" value="4" onclick="addInput(this.value)"></td>
<td><input type="button" id="five" value="5" onclick="addInput(this.value)"></td>
<td><input type="button" id="six" value="6" onclick="addInput(this.value)"></td>
<td><input type="button" id="multiply" value="*" onclick="addInput(this.value)"></td>
</tr>
<tr>
<td><input type="button" id="one" value="1" onclick="addInput(this.value)"></td>
<td><input type="button" id="two" value="2" onclick="addInput(this.value)"></td>
<td><input type="button" id="three" value="3" onclick="addInput(this.value)"></td>
<td><input type="button" id="minus" value="-" onclick="addInput(this.value)"></td>
</tr>
<tr>
<td><input type="button" id="zero" value="0" onclick="addInput(this.value)"></td>
<td><input type="button" id="plus" value="+" onclick="addInput(this.value)"></td>
<td><input type="button" id="none" value="NONE" onclick="addInput(this.value)"></td>
<td><input type="button" id="none" value="NONE" onclick="addInput(this.value)"></td>
</tr>
</table>
</form>
</body>
</html>'Java Script' 카테고리의 다른 글
| HTML + 자바스크립트로 산수 문제 풀이 사이트 만들기 (0) | 2020.08.27 |
|---|
