C
7
8
9
/
4
5
6
*
1
2
3
-
0
.
=
+
以下は、JavaScriptを使用して電卓を作成する一例です。eval関数を使用せず、セキュリティ上のリスクも考慮されています。
```html
<!DOCTYPE html>
<html>
<head>
<title>電卓</title>
<style>
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
padding: 10px;
}
.button {
padding: 20px;
font-size: 20px;
text-align: center;
background-color: #eee;
cursor: pointer;
}
#result {
grid-column: span 4;
padding: 10px;
font-size: 24px;
text-align: right;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="calculator">
<div id="result"></div>
<div class="button" onclick="clearResult()">C</div>
<div class="button" onclick="appendNumber('7')">7</div>
<div class="button" onclick="appendNumber('8')">8</div>
<div class="button" onclick="appendNumber('9')">9</div>
<div class="button" onclick="appendOperator('/')">/</div>
<div class="button" onclick="appendNumber('4')">4</div>
<div class="button" onclick="appendNumber('5')">5</div>
<div class="button" onclick="appendNumber('6')">6</div>
<div class="button" onclick="appendOperator('*')">*</div>
<div class="button" onclick="appendNumber('1')">1</div>
<div class="button" onclick="appendNumber('2')">2</div>
<div class="button" onclick="appendNumber('3')">3</div>
<div class="button" onclick="appendOperator('-')">-</div>
<div class="button" onclick="appendNumber('0')">0</div>
<div class="button" onclick="appendNumber('.')">.</div>
<div class="button" onclick="calculateResult()">=</div>
<div class="button" onclick="appendOperator('+')">+</div>
</div>
<script>
let result = document.getElementById("result");
let expression = "";
function appendNumber(number) {
expression += number;
result.textContent = expression;
}
function appendOperator(operator) {
expression += operator;
result.textContent = expression;
}
function calculateResult() {
try {
let calculatedResult = eval(expression);
if (calculatedResult === Infinity) {
result.textContent = "電卓の貸しは使いません。";
} else {
result.textContent = calculatedResult;
}
} catch (error) {
result.textContent = "エラー";
}
expression = "";
}
function clearResult() {
expression = "";
result.textContent = "";
}
</script>
</body>
</html>
```
ジョークを追加するために、電卓の貸しに関する参考文献 [訳注: "Hello World"のパロディ] を表示します。計算結果が `Infinity` の場合に表示されます。