彩りの大地 Laboratory 比率計算機

比率計算機

名前の通りのテキトーな比率計算機



説明書

その通り、比率の計算機です。
元の比率欄には元となる比率をそれぞれ記入します。記入フォーマットは実数値を入れてください。
等比倍率欄には元の比率を何倍したいか記入します。記入フォーマットは実数値、百分率、分数が可能です。
※百分率の場合「50%」のように「%」込みで記入、分数の場合は「1/256」のようなスタイルで記入
値1指定欄には値1を固定する場合の実数を、値2指定欄には値2を固定する場合の実数を記入します。
尚、等比倍率・値1指定・値2指定共にいずれも入力は任意です。 求めたい値に応じて入力いただければと思います。
結果は「計算結果」の欄に表示されます(小数点以下第6位を四捨五入)。

計算ボタンがないのですが、入力フォームからフォーカス(入力可能状態)が外れるたびに計算されるようにしているため、 何もないところなど、適当なところをクリックすればいいと思います。

ソースについて


// 出力からinnerHTMLを使用したスクリプトでコントロールしています。
// あんまり意味はないけれども、使いまわしやすいのが特徴です。
function calc1() {
	var txt = "";
	
	txt += "元の比率 <input type='text' id='c1' value='1.5' onblur='calc2()'>";
	txt += " ： <input type='text' id='c2' value='2' onblur='calc2()'><br>";
	txt += "等比倍率 <input type='text' id='time' value='100%' onblur='calc2()'><br>";
	txt += "値1指定 <input type='text' id='x1' value='100' onblur='calc2()'>";
	txt += " ： <input type='text' readonly='readonly' value='x2' style='color: #cccccc; background-color: #999999; ' onblur='calc2()'><br>";
	
	txt += "値2指定 <input type='text' value='x1' readonly='readonly' value='x2' style='color: #cccccc; background-color: #999999; ' onblur='calc2()'>";
	txt += " ： <input type='text' id='x2' value='100' onblur='calc2()'><br>";
	
	document.getElementById('inst').innerHTML = txt;
}

// スクリプトの計算部と算出結果の関数。
function calc2() {
	var txt = "";
	var pert = 1;
	var testtime, enc1, enc2, entime, enx1, enx2;
	
	testtime = document.getElementById('time').value.split("/");
	if(testtime.length == 1){
		testtime[1] = "1";
	}
	
	if(testtime[0].indexOf("%") > 0){
		pert = 100;
		testtime[0] = testtime[0].substring(0, testtime[0].indexOf("%"));
	}
	
	enc1 = Number(document.getElementById('c1').value);
	enc2 = Number(document.getElementById('c2').value);
	entime = Number(testtime[0]) / Number(testtime[1]) / pert;
	enx1 = Number(document.getElementById('x1').value);
	enx2 = Number(document.getElementById('x2').value);
	
	txt += "計算結果<br>";
	txt += "　等比倍率変換　　" + Math.round(enc1 * entime * 100000) / 100000 + " ： " + Math.round(enc2 * entime * 100000) / 100000 + "<br>";
	txt += "　値1指定で変換　　" + Math.round(enx1 * 100000) / 100000 + " ： " + Math.round(enc2 / enc1 * enx1 * 100000) / 100000 + "<br>";
	txt += "　値2指定で変換　　" + Math.round(enc1 / enc2 * enx2 * 100000) / 100000 + " ： " + Math.round(enx2 * 100000) / 100000 + "<br>";
	
	document.getElementById('anst').innerHTML = txt;
}
window.addEventListener('load', function() { 
	calc1();
	calc2();
},false);

能書き

入力値の処理についてやっていることは確率計算機とだいたい同じです。 こちらは百分率で計算するわけではないので、等倍計算で実行します。
等比倍率に「%」を入力された場合でも等倍計算を実行するため、入力値を100倍して計算を継続しています。

ここでの小数点以下の処理として、Math.round()を使用していますが、これが四捨五入をするためのメソッドです。
ちなみに、Math.floor()で切り捨て、Math.ceil()で切り上げも行えます。

ただし、Excel関数とは違って引数が1つしかなく、切り捨て/切り上げ処理をする箇所のコントロールをするための引数を記述する箇所がないため、 処理する前に100000倍し、処理を行った後に同じ値で割り算をすることで、切り捨て箇所をコントロールしています。

計算のアルゴリズムについては、単純な対比計算です。小学校でも習ったように、外側と内側の値同士で掛け算しあうと値が同じになるというだけの話です。

c1 ： c2 = c3 ： c4
c1 / c3 = c2 / c4
c1 * c4 = c2 * c3