<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ノギスの測定値を揃えるアプリ</title>
<style>
label {
display: inline-block;
width: 110px;
margin-bottom: 5px;
}
.input-box {
margin-bottom: 10px;
}
button {
display: block;
margin-bottom: 10px;
}
#result-box {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
margin-bottom: 10px;
}
th,
td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<div class="input-box">
<label for="a">製品寸法A:</label>
<input type="number" id="a" /><br />
<label for="a-">製品寸法A':</label>
<input type="number" id="a-" /><br />
<label for="b">製品寸法B:</label>
<input type="number" id="b" /><br />
<label for="b-">製品寸法B':</label>
<input type="number" id="b-" /><br />
<label for="c">製品寸法C:</label>
<input type="number" id="c" /><br />
<label for="c-">製品寸法C':</label>
<input type="number" id="c-" /><br />
<label for="d">製品寸法D:</label>
<input type="number" id="d" /><br />
<label for="d-">製品寸法D':</label>
<input type="number" id="d-" /><br />
</div>
<div class="input-box">
<table>
<caption>ノギスの測定値</caption>
<thead>
<tr>
<th></th>
<th>上側</th>
<th>下側</th>
</tr>
</thead>
<tbody>
<tr>
<td>右側</td>
<td><input type="number" id="x1" /></td>
<td><input type="number" id="x3" /></td>
</tr>
<tr>
<td>左側</td>
<td><input type="number" id="x2" /></td>
<td><input type="number" id="x4" /></td>
</tr>
<tr>
<td>上側</td>
<td><input type="number" id="y1" /></td>
<td><input type="number" id="y3" /></td>
</tr>
<tr>
<td>下側</td>
<td><input type="number" id="y2" /></td>
<td><input type="number" id="y4" /></td>
</tr>
</tbody>
</table>
</div>
<div class="input-box">
<button onclick="calculate()">計算する</button>
<button onclick="showHistory()">履歴を表示する</button>
<button onclick="reset()">リセットする</button>
</div>
<div id="result-box"></div>
<script>
let history = [];
function calculate() {
let a = Number(document.getElementById("a").value);
let a_ = Number(document.getElementById("a-").value);
let b = Number(document.getElementById("b").value);
let b_ = Number(document.getElementById("b-").value);
let c = Number(document.getElementById("c").value);
let c_ = Number(document.getElementById("c-").value);
let d = Number(document.getElementById("d").value);
let d_ = Number(document.getElementById("d-").value);
let x1 = Number(document.getElementById("x1").value);
let x2 = Number(document.getElementById("x2").value);
let x3 = Number(document.getElementById("x3").value);
let x4 = Number(document.getElementById("x4").value);
let y1 = Number(document.getElementById("y1").value);
let y2 = Number(document.getElementById("y2").value);
let y3 = Number(document.getElementById("y3").value);
let y4 = Number(document.getElementById("y4").value);
let z = ((x1 - x2) / 2).toFixed(3);
let z_ = ((x3 - x4) / 2).toFixed(3);
let v = ((y1 - y2) / 2).toFixed(3);
let v_ = ((y3 - y4) / 2).toFixed(3);
let resultA = (a - z).toFixed(3);
let resultA_ = (a_ - z_).toFixed(3);
let resultB = (b - z_).toFixed(3);
let resultB_ = (b_ - z).toFixed(3);
let resultC = (c - v_).toFixed(3);
let resultC_ = (c_ - v_).toFixed(3);
let resultD = (d - v).toFixed(3);
let resultD_ = (d_ - v).toFixed(3);
let resultHTML =
`<table>` +
`<tr><th>製品寸法A:</th><td>${resultA}</td></tr>` +
`<tr><th>製品寸法A':</th><td>${resultA_}</td></tr>` +
`<tr><th>製品寸法B:</th><td>${resultB}</td></tr>` +
`<tr><th>製品寸法B':</th><td>${resultB_}</td></tr>` +
`<tr><th>製品寸法C:</th><td>${resultC}</td></tr>` +
`<tr><th>製品寸法C':</th><td>${resultC_}</td></tr>` +
`<tr><th>製品寸法D:</th><td>${resultD}</td></tr>` +
`<tr><th>製品寸法D':</th><td>${resultD_}</td></tr>` +
`</table>`;
document.getElementById("result-box").innerHTML = resultHTML;
let calculationHistory = {
a,
a_,
b,
b_,
c,
c_,
d,
d_,
x1,
x2,
x3,
x4,
y1,
y2,
y3,
y4,
};
history.push(calculationHistory);
}
function showHistory() {
let historyHTML = "";
history.forEach((calculation, index) => {
historyHTML +=
`<h5>計算${index + 1}</h5>` +
`<div>` +
`<p>製品寸法A: ${calculation.a}</p>` +
`<p>製品寸法A': ${calculation.a_}</p>` +
`<p>製品寸法B: ${calculation.b}</p>` +
`<p>製品寸法B': ${calculation.b_}</p>` +
`<p>製品寸法C: ${calculation.c}</p>` +
`<p>製品寸法C': ${calculation.c_}</p>` +
`<p>製品寸法D: ${calculation.d}</p>` +
`<p>製品寸法D': ${calculation.d_}</p>` +
`<table>` +
`<tr><th></th><th>上側</th><th>下側</th></tr>` +
`<tr><th>右側</th><td>${calculation.x1}</td><td>${calculation.x3}</td></tr>` +
`<tr><th>左側</th><td>${calculation.x2}</td><td>${calculation.x4}</td></tr>` +
`<tr><th>上側</th><td>${calculation.y1}</td><td>${calculation.y3}</td></tr>` +
`<tr><th>下側</th><td>${calculation.y2}</td><td>${calculation.y4}</td></tr>` +
`</table>` +
`</div>`;
});
document.getElementById("result-box").innerHTML = historyHTML;
}
function reset() {
history = [];
document.getElementById("result-box").innerHTML = "";
let inputs = document.getElementsByTagName("input");
for (let i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}
}
</script>
</body>
</html>
