Let's start JavaScript 115 3Dプリント用フィラメントの使用量確認

3Dプリント用フィラメントの使用量の目安確認する計算器です。

残り少なくなったフィラメントで事足りるかの確認用です。フィラメントの直径をはらり、その倍数を表示して目安を確認します。

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<meta name="viewport"

        content="width=device-width, initial-scale=1.0">

<title>フィラメントの長さ</title>

<style>

body {

font-family: sans-serif;

padding: 10px;

max-width: 300px;

background: black;

color: white;

margin: 10px auto;

}

</style>

</head>

<body>

<h2>フィラメントの長さ計算</h2>

<label>

円の直径：

<input type="number"

        id="diameter" value="10" min="0" step="any">

</label>

<button onclick="calculate()">計算</button>

<div id="result"></div>

<script>

function calculate() {

const diameter =

        Number(document.getElementById("diameter").value);

if (diameter <= 0) {

document.getElementById("result").innerHTML =

"直径は0より大きい値を入力してください。";

return;

}

// 円周 = 直径 × π

const circumference = diameter * Math.PI;

let html = `

<p>&emsp;&emsp;&ensp;&thinsp;

            円周：${circumference.toFixed(2)}</p>

<ul>

<li>10倍：${(circumference * 10).toFixed(2)}</li>

<li>20倍：${(circumference * 20).toFixed(2)}</li>

<li>30倍：${(circumference * 30).toFixed(2)}</li>

<li>40倍：${(circumference * 40).toFixed(2)}</li>

<li>50倍：${(circumference * 50).toFixed(2)}</li>

</ul>

`;

document.getElementById("result").innerHTML = html;

}

// ページを開いたときにも計算

calculate();

</script>

</body>

</html>

事項直後の画面です。

目安として、フィラメントロールの幅は一般的に60mm。フィラメントの径は1.75mm。よって60mmの幅に34本巻き付いています。

フィラメントの直径を入力し［計算］をクリックするだけです。倍数は何周必要かの目安です。