Vh/Vwを計算するためにVh/Vw calculatorを構築。自分用にメモとして。
HTML
<div class="container">
<h1>Vh/Vw calculator</h1>
<form>
<div class="form-group row text-md-right">
<label for="txtScreenX" class="col-sm-2 col-form-label text-right">X:</label>
<div class="col-sm-4">
<input type="number" class="form-control text-right" id="txtScreenX">
</div>
<label for="txtScreenY" class="col-sm-2 col-form-label text-right">Y:</label>
<div class="col-sm-4">
<input type="number" class="form-control text-right" id="txtScreenY">
</div>
</div>
<hr>
<div class="form-group row ">
<label for="txtX" class="col-sm-2 col-form-label text-right">X:</label>
<div class="col-sm-3">
<input type="number" class="form-control text-right" id="txtX">
</div>
<label for="txtLeft" class="col-sm-2 col-form-label text-right">Left:</label>
<div class="col-sm-3">
<input type="number" class="form-control text-right" id="txtLeft">
</div>
<label for="vw1" class="col-sm-2 col-form-label ">vw</label>
</div>
<div class="form-group row">
<label for="txtY" class="col-sm-2 col-form-label text-right">Y:</label>
<div class="col-sm-3">
<input type="number" class="form-control text-right" id="txtY">
</div>
<label for="txtTop" class="col-sm-2 col-form-label text-right">Top:</label>
<div class="col-sm-3">
<input type="number" class="form-control text-right" text-right id="txtTop">
</div>
<label for="vh1" class=" col-sm-2 col-form-label ">vh</label>
</div>
<div class="form-group row">
<label for="txtwidth" class="col-sm-2 col-form-label text-right">Width:</label>
<div class="col-sm-3">
<input type="number" class="form-control text-right" id="txtwidth">
</div>
<label for="widthvw" class="col-sm-2 col-form-label text-right">Width:</label>
<div class="col-sm-3">
<input type="number" class="form-control text-right" id="widthvw">
</div>
<label for="vw2" class="col-sm-2 col-form-label">vw</label>
</div>
<div class="form-group row">
<label for="txtheight" class="col-sm-2 col-form-label text-right">Height:</label>
<div class="col-sm-3">
<input type="number" class="form-control text-right" id="txtheight">
</div>
<label for="heightvh" class="col-sm-2 col-form-label text-right">Height:</label>
<div class="col-sm-3">
<input type="number" class="form-control text-right" id="heightvh">
</div>
<label for="vh2" class="col-sm-2 col-form-label">vh</label>
</div>
<div class="form-group row">
<label for="resultForm" class="col-sm-2 col-form-label text-right">Style</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="resultForm" onfocus="this.select()">
</div>
</div>
</form>
</div>
JS
//6つの入力フォームの値を取得
var txtScreenX = document.getElementById("txtScreenX");
var txtScreenY = document.getElementById("txtScreenY");
var txtX = document.getElementById("txtX");
var txtY = document.getElementById("txtY");
var txtwidth = document.getElementById("txtwidth");
var txtheight = document.getElementById("txtheight");
//割り算の結果を別に入力フォームに表示
var txtLeft = document.getElementById("txtLeft");
var txtTop = document.getElementById("txtTop");
var widthvw = document.getElementById("widthvw");
var heightvh = document.getElementById("heightvh");
var resultForm = document.getElementById("resultForm");
// 1行が計算できるか
function canCalc(leftText, baseValue) {
// TODO: 2つが数値だったらtrueを返す
// leftTextが数値 かつ baseValueが数値 だったらtrueを返す
return isNumber(leftText) && isNumber(baseValue);
}
// 数値かどうか
function isNumber(text) {
return !isNaN(text) && isFinite(text);
}
//計算する
function cal() {
var styleString = "";
console.log("実行されてる");
// styleに反映する文字列
var styleString;
// 左に値がある&数値のとき
//left
if (canCalc(txtX.value, txtScreenX.value)) {
// 計算する
var left = ((txtX.value / txtScreenX.value) * 100);
// 値をセット
txtLeft.value = left;
// styleにも反映
styleString += 'left: ' + left + 'vw; ';
}
//top
if (canCalc(txtY.value, txtScreenY.value)) {
// 計算する
var top = ((txtY.value / txtScreenY.value) * 100);
// 値をセット
txtTop.value = top;
// styleにも反映
styleString += 'top: ' + top + 'vh; ';
}
//Width
if (canCalc(txtwidth.value, widthvw.value)) {
// 計算する
var width = ((txtwidth.value / txtScreenX.value) * 100);
// 値をセット
widthvw.value = width;
// styleにも反映
styleString += 'width: ' + width + 'vw; ';
}
//height
if (canCalc(txtheight.value, heightvh.value)) {
// 計算する
var height = ((txtheight.value / txtScreenY.value) * 100);
// 値をセット
heightvh.value = height;
// styleにも反映
styleString += 'height: ' + height + 'vh;';
}
//styleに全部まとめる
resultForm.value = styleString;
console.log(styleString);
}
//数字が変更されたからonChangeが働いて結果の数値がかわる
//addEventListener( 種類, 関数, false )
txtScreenX.addEventListener('change', cal, false);
txtScreenY.addEventListener('change', cal, false);
txtX.addEventListener('change', cal, false);
txtY.addEventListener('change', cal, false);
txtwidth.addEventListener('change', cal, false);
txtheight.addEventListener('change', cal, false);