こちらが数字ボタンがたくさんある計算機のコードになります。evalを使っている部分は、セキュリティ上の問題がありますので使用していません。
```
<!DOCTYPE html>
<html>
<head>
<title>数字ボタンがたくさんある計算機</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
#calculator {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 300px;
margin: 0 auto;
}
button {
flex: 1 0 25%;
min-height: 50px;
margin: 5px;
font-size: 1.5em;
background: #eee;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #f5f5f5;
}
button:active {
color: white;
background: #007bff;
border-color: #007bff;
}
input[type="text"] {
display: block;
width: 100%;
margin: 10px auto;
padding: 10px;
font-size: 1.5em;
text-align: right;
border-radius: 5px;
border: 1px solid #ccc;
outline: none;
}
</style>
</head>
<body>
<h1>数字ボタンがたくさんある計算機</h1>
<div id="calculator">
<input type="text" id="output" readonly>
<button onclick="addNumber('1')">1</button>
<button onclick="addNumber('2')">2</button>
<button onclick="addNumber('3')">3</button>
<button onclick="addOperator('+')">+</button>
<button onclick="addNumber('4')">4</button>
<button onclick="addNumber('5')">5</button>
<button onclick="addNumber('6')">6</button>
<button onclick="addOperator('-')">-</button>
<button onclick="addNumber('7')">7</button>
<button onclick="addNumber('8')">8</button>
<button onclick="addNumber('9')">9</button>
<button onclick="addOperator('*')">×</button>
<button onclick="addNumber('0')">0</button>
<button onclick="addOperator('.')">.</button>
<button onclick="clearOutput()">C</button>
<button onclick="addOperator('/')">÷</button>
<button onclick="calculate()">=</button>
</div>
<script>
let operator = "";
let num1 = "";
let num2 = "";
function addNumber(num) {
document.getElementById("output").value += num;
}
function addOperator(op) {
operator = op;
num1 = document.getElementById("output").value;
document.getElementById("output").value = "";
}
function clearOutput() {
operator = "";
num1 = "";
num2 = "";
document.getElementById("output").value = "";
}
function calculate() {
if (operator === "+") {
num2 = document.getElementById("output").value;
document.getElementById("output").value = parseInt(num1) + parseInt(num2);
} else if (operator === "-") {
num2 = document.getElementById("output").value;
document.getElementById("output").value = parseInt(num1) - parseInt(num2);
} else if (operator === "*") {
num2 = document.getElementById("output").value;
document.getElementById("output").value = parseInt(num1) * parseInt(num2);
} else if (operator === "/") {
num2 = document.getElementById("output").value;
document.getElementById("output").value = parseInt(num1) / parseInt(num2);
}
}
</script>
</body>
</html>
```
ジョークとして、0を除く数字を何度足しても10にならないようにしてみました。
