個人的に必要だったので作ってみました。尺貫法における「尺」の単位には、建築、土木、木工などの現場で用いる曲尺（かねじゃく）と、呉服や和裁など、着物の生地を測る際に用いる鯨尺（くじらじゃく）の2種類があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>cm・曲尺・鯨尺 相互変換</title>
<style>
body{
background: black;
color: white;
font-family: sans-serif;
margin: 20px;
}
.container{
max-width:250px;
margin:auto;
background:black;
padding:10px;
}
h3{
text-align:center;
}
.row{
display:flex;
align-items:center;
margin:15px 0;
}
label{
width:50px;
font-weight:bold;
}
input{
flex:1;
padding:8px;
font-size:12px;
}
</style>
</head>
<body>
<div class="container">
<h3>cm/曲尺/鯨尺/長さ相互変換</h3>
<div class="row">
<label>cm</label>
<input type="number" id="cm" step="0.001">
</div>
<div class="row">
<label>曲尺</label>
<input type="number" id="kane" step="0.001">
</div>
<div class="row">
<label>鯨尺</label>
<input type="number" id="kujira" step="0.001">
</div>
</div>
<script>
const CM_PER_KANE = 30.3;
const CM_PER_KUJIRA = 37.88;
const cm = document.getElementById("cm");
const kane = document.getElementById("kane");
const kujira = document.getElementById("kujira");
let updating = false;
function round(v){
return Number(v.toFixed(3));
}
cm.addEventListener("input", ()=>{
if(updating) return;
updating = true;
let c = parseFloat(cm.value);
if(isNaN(c)){
kane.value = "";
kujira.value = "";
}else{
kane.value = round(c / CM_PER_KANE);
kujira.value = round(c / CM_PER_KUJIRA);
}
updating = false;
});
kane.addEventListener("input", ()=>{
if(updating) return;
updating = true;
let k = parseFloat(kane.value);
if(isNaN(k)){
cm.value = "";
kujira.value = "";
}else{
let c = k * CM_PER_KANE;
cm.value = round(c);
kujira.value = round(c / CM_PER_KUJIRA);
}
updating = false;
});
kujira.addEventListener("input", ()=>{
if(updating) return;
updating = true;
let k = parseFloat(kujira.value);
if(isNaN(k)){
cm.value = "";
kane.value = "";
}else{
let c = k * CM_PER_KUJIRA;
cm.value = round(c);
kane.value = round(c / CM_PER_KANE);
}
updating = false;
});
</script>
</body>
</html>
実行直後の画面です。
曲尺で1尺を設定した結果。
鯨尺で1尺を設定した結果。
cmで1cmを設定した結果。