諸般の事情で必要に迫られて作ってみました。相変わらずレイアウトは必要最低限です。
辺の長さ = 2r × sin(pai/n)
r：円の半径
n：多角形の辺の数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>正多角形の辺の長さ計算</title>
<style>
body {
background: black;
color: white;
font-family: sans-serif;
margin: 20px;
}
input {
width: 80px;
margin: 5px;
}
label {
display: block;
margin: 10px 0;
}
</style>
</style>
</head>
<body>
<center>
<h3>正多角形の1辺の長さ計算</h3>
<label>
半径:
<input type="number" id="radius" value="100">
</label>
<label>
辺の数:
<input type="number" id="sides" value="6" min="3">
</label>
<button onclick="calc()">計算</button>
<br>
<p>辺の長さ = 2r × sin(π/n)<br>
r：円の半径<br>
π：円周率<br>
n：多角形の辺の数</p><br>
<p id="result"></p>
<script>
function calc() {
const r = parseFloat(document.getElementById("radius").value);
const n = parseInt(document.getElementById("sides").value);
if (n < 3) {
document.getElementById("result").textContent =
"辺の数は3以上です。";
return;
}
const length = 2 * r * Math.sin(Math.PI / n);
document.getElementById("result").textContent =
`1辺の長さ = ${length.toFixed(4)}`;
}
</script>
</center>
</body>
</html>
実行直後のデフォルト値を変更し・・・
計算ボタンをクリックするだけです。
