<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
td {
padding: 5px 10px;
text-align: center;
}
input {
border: none;
text-align: right;
}
input:focus {
outline: none;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td colspan="4">
<input type="text" id="display">
</td>
</tr>
<tr>
<td colspan="4">
<input type="text" id="result">
</td>
</tr>
<tr>
<td colspan="3" onclick="reset()">AC</td>
<td onclick="add('/')">/</td>
</tr>
<tr>
<td onclick="add(7)">7</td>
<td onclick="add(8)">8</td>
<td onclick="add(9)">9</td>
<td onclick="add('*')">*</td>
</tr>
<tr>
<td onclick="add(4)">4</td>
<td onclick="add(5)">5</td>
<td onclick="add(6)">6</td>
<td onclick="add('-')">-</td>
</tr>
<tr>
<td onclick="add(1)">1</td>
<td onclick="add(2)">2</td>
<td onclick="add(3)">3</td>
<td onclick="add('+')">+</td>
</tr>
<tr>
<td colspan="2" onclick="add(0)">0</td>
<td onclick="add('.')">.</td>
<td onclick="calculate()">=</td>
</tr>
</table>
<script>
function add(char) {
var display = document.getElementById('display');
display.value = display.value + char;
}
function calculate() {
var display = document.getElementById('display');
var result = eval(display.value);
document.getElementById('result').value = result;
}
function reset() {
document.getElementById('display').value = "";
document.getElementById('result').value = "";
}
</script>
</body>
</html>
'구트아카데미 > 3. 자바스크립트' 카테고리의 다른 글
| 자바스크립트. 함수 리턴 (0) | 2021.06.28 |
|---|---|
| [자바스크립트] 가위바위보 게임 (0) | 2021.06.26 |
| [자바스크립트] 퀴즈게임 (0) | 2021.06.24 |
| [자바스크립트] 주사위게임 (0) | 2021.06.23 |
| [자바스크립트] 주사위 게임 (0) | 2021.06.22 |