아래는 간단한 HTML과 JavaScript를 사용하여 기본적인 계산기를 만드는 예제입니다. 이 예제는 덧셈, 뺄셈, 곱셈, 나눗셈을 지원합니다.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 계산기</title>
<style>
/* CSS 스타일링 */
input[type="button"] {
width: 50px;
height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>간단한 계산기</h2>
<input type="text" id="display" readonly>
<br>
<input type="button" value="1" onclick="appendNumber('1')">
<input type="button" value="2" onclick="appendNumber('2')">
<input type="button" value="3" onclick="appendNumber('3')">
<input type="button" value="+" onclick="appendOperator('+')">
<br>
<input type="button" value="4" onclick="appendNumber('4')">
<input type="button" value="5" onclick="appendNumber('5')">
<input type="button" value="6" onclick="appendNumber('6')">
<input type="button" value="-" onclick="appendOperator('-')">
<br>
<input type="button" value="7" onclick="appendNumber('7')">
<input type="button" value="8" onclick="appendNumber('8')">
<input type="button" value="9" onclick="appendNumber('9')">
<input type="button" value="*" onclick="appendOperator('*')">
<br>
<input type="button" value="0" onclick="appendNumber('0')">
<input type="button" value="." onclick="appendNumber('.')">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/" onclick="appendOperator('/')">
<script>
// 숫자를 입력하는 함수
function appendNumber(number) {
document.getElementById('display').value += number;
}
// 연산자를 입력하는 함수
function appendOperator(operator) {
document.getElementById('display').value += operator;
}
// 계산을 수행하는 함수
function calculate() {
let expression = document.getElementById('display').value;
let result = eval(expression); // eval 함수를 사용하여 문자열을 계산
document.getElementById('display').value = result;
}
</script>
</body>
</html>
```
이 코드를 HTML 파일에 복사하여 저장한 후 웹 브라우저에서 열면 간단한 계산기를 사용할 수 있습니다.
카테고리 없음
chtgpt 계산기 코딩
반응형
반응형