0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vh/Vw calculator

Last updated at Posted at 2020-08-28

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);

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?