hakeの日記

Windows環境でプログラミングの勉強をしています。

javascript 部品の配置

program javascript

style属性、またはstylesheetで、position:absolute, top, left(right), width, heightを設定すると好きな位置に配置できる。

calc.html

<!DOCTYPE HTML>
<html lang='ja'>
<head>
	<meta http-equiv='content-type' content='text/html; charset=Shift_JIS'>
	<link rel='stylesheet' type='text/css' href='./calc.css'>
	<title>簡易電卓</title>
	<script type="text/javascript" src="./calc.js" charset="Shift_JIS">
	</script>
	</head>
<body onload='init()'>
	<input type='text' id='disp'
		style='font-size:x-large; position:absolute; top:10px; left:100px; width:196px; text-align:right;'>
	<input type='button' value='AC' onclick='init()' class='btn' style='top: 40px; left:100px;'>

	<input type='button' value='7' onclick='push_num("7")' class='btn' style='top: 90px; left:100px;'>
	<input type='button' value='8' onclick='push_num("8")' class='btn' style='top: 90px; left:150px;'>
	<input type='button' value='9' onclick='push_num("9")' class='btn' style='top: 90px; left:200px;'>
	<input type='button' value='/' onclick='push_op("/")'  class='btn' style='top: 90px; left:250px;'>

	<input type='button' value='4' onclick='push_num("4")' class='btn' style='top: 140px; left:100px;'>
	<input type='button' value='5' onclick='push_num("5")' class='btn' style='top: 140px; left:150px;'>
	<input type='button' value='6' onclick='push_num("6")' class='btn' style='top: 140px; left:200px;'>
	<input type='button' value='*' onclick='push_op("*")'  class='btn' style='top: 140px; left:250px;'>

	<input type='button' value='1' onclick='push_num("1")' class='btn' style='top: 190px; left:100px;'>
	<input type='button' value='2' onclick='push_num("2")' class='btn' style='top: 190px; left:150px;'>
	<input type='button' value='3' onclick='push_num("3")' class='btn' style='top: 190px; left:200px;'>
	<input type='button' value='-' onclick='push_op("-")'  class='btn' style='top: 190px; left:250px;'>

	<input type='button' value='0' onclick='push_num("0")'   class='btn' style='top: 240px; left:100px;'>
	<input type='button' value='.' onclick='push_point()' class='btn' style='top: 240px; left:150px;'>
	<input type='button' value='=' onclick='push_eq()'    class='btn' style='top: 240px; left:200px;'>
	<input type='button' value='+' onclick='push_op("+")'    class='btn' style='top: 240px; left:250px;'>
</body>
</html>

calc.css

.btn {
	position: absolute;
	width:50px;
	height:50px;
}

calc.js

var numL = '';    // 被演算数
var numR = '0';   // 演算数
var op   = '';    // 演算子
var eq   = false; // "="キー押下でtrue

function display(){
	document.getElementById('disp').value = numR;
}

function init(){
	numL = ''; numR = '0'; op   = ''; eq = false;
	display();
}

function push_num(str){
	if(eq == true){
		numR = '0';
		eq = false;
	} else if(numL == '' && op != ''){
		numL = numR;
		numR = '0';
	}
	if(numR == '0'){
		numR = str;
	} else {
		numR = numR + str;
	}
	display();
}

function push_point(){
	if(eq == true){
		numR = '0';
		eq = false;
	} else if(numL == '' && op != ''){
		numL = numR;
		numR = '0';
	}
	if(numR.indexOf('.') == -1){
		numR = numR + '.';
	}
}

function calc(){
	var result;
	if(numL != '' && op != ''){
		switch(op){
			case '+': result = parseFloat(numL) + parseFloat(numR); break;
			case '-': result = parseFloat(numL) - parseFloat(numR); break;
			case '*': result = parseFloat(numL) * parseFloat(numR); break;
			case '/': result = parseFloat(numL) / parseFloat(numR); break;
		}
		numL = ''; op = '';
		numR = '' + result; // resultを文字列に変換
		display();
	}
}

function push_op(str){
	calc();
	eq = false;
	op = str;
}

function push_eq(){
	calc();
	eq = true;
}