pointとmmの相互変換をちょこちょこ使うので作りました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>point ⇔ mm 相互変換</title>
<style>
body{
font-family:sans-serif;
margin:40px;
font-size:18px;
background: black;
color: white;
}
input{
width:120px;
padding:6px;
font-size:18px;
}
label{
display:inline-block;
width:50px;
}
div{
margin-bottom:15px;
}
</style>
</head>
<body>
<center>
<h3>point ⇔ mm 相互変換</h3>
<div>
<label>point</label>
<input type="number" id="pt" step="0.01">
</div>
<div>
<label>mm</label>
<input type="number" id="mm" step="0.01">
</div>
<script>
// 1pt = 25.4 / 72 mm
const PT_TO_MM = 25.4 / 72;
const MM_TO_PT = 72 / 25.4;
const pt = document.getElementById("pt");
const mm = document.getElementById("mm");
pt.addEventListener("input", function () {
if (this.value === "") {
mm.value = "";
return;
}
mm.value = (parseFloat(this.value) * PT_TO_MM).toFixed(3);
});
mm.addEventListener("input", function () {
if (this.value === "") {
pt.value = "";
return;
}
pt.value = (parseFloat(this.value) * MM_TO_PT).toFixed(3);
});
</script>
</center>
</body>
</html>
実行したら・・・
どちらかに値を入れます。ここではpointに10と入力すると直ぐに3.528mmと表示されます。
そのままmmに5と入力すると直ぐに14.173pointと表示されます。つまり、どちらか一方の値を入力するともう一方が自動で更新されます。
