<html>
<head>
<meta charset="UTF-8">
<title>계산기 만들기</title>
<style>
table {
text-align : center;
border : 0;
width : 300px;
}
tr {
text-align : center;
}
td {
width : 80px;
}
input[type=button] {
width : 60px;
}
</style>
<script type="text/javascript">
//입력받아서 수식을 만들어주는 함수
function addInput(v){
let lcd = document.getElementById('lcd');
if(lcd.value == '0'){
lcd.value = v;
} else{
lcd.value += v; //입력문자 누적(결합)
}
}
//계산해주는 함수
function calculate(){
let lcd = document.getElementById('lcd');
lcd.value = eval(lcd.value);
}
//C, CE버튼에 의해 뒤에서부터 한 글자씩 지우기
function backward(){
let lcd = document.getElementById('lcd');
let len = lcd.value.length; //문자열(수식) 길이값을 가져온다
if(len == 0){
return;
}else{ // substr(시작인덱스, 끝인덱스)
lcd.value = lcd.value.substr(0,len-1); // 맨뒤의 한글자를 뺀 나머지 글자 >> 000000 0
}
}
//전체 지우기
function clearlcd(){
var lcd = document.getElementById('lcd');
lcd.value = '0';
}
</script>
</head>
<body>
<h3>계산기 만들기</h3>
<hr>
<form name="cal">
<table>
<tr>
<td colspan="4"><input type="text" id="lcd" value="0" size="50"></td></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="equal" 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="divi" 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="mul" 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="mina" 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="NONE1" value="NONE" ></td>
<td><input type="button" id="NONE2" value="NONE" ></td></tr>
</table>
</form>
</body>
</htm