ここまでの完成版ソースコードを掲載します。
<html>
<head>
<title>MyCalc</title>
<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript"><!--
/* ここに JavaScript を記述する */
$(function(){
// 移動と終了
$(document).mousedown(function() {
window.nativeWindow.startMove();
});
$("#close_btn").click(function(){
if (confirm("終了しても良いですか？")) {
window.close();
}
});
// 計算処理
var main_txt = $("#main_txt");
var op = "";
var temp = 0;
var disp = "";
var cny = 0;
// ボタンごとにイベントの設定
// 数字キー
for (var i = 0; i <= 9; i++) {
$("#btn" + i).click(newButtonEvent(i));
}
// 演算キー
var btns = ["dot","rev","ce","div","jpy","mul","cny",
"minus","mod","plus","minus","eq"];
for (var i = 0; i < btns.length; i++) {
var s = btns[i];
var btn = $("#" + s + "_btn");
btn.click(newButtonEvent(btn.val()));
}
function newButtonEvent(n) {
return function(){ pushButton(n); };
}
function reset() {
disp = ""; op = ""; temp = 0;
}
// キーを押したときの処理
$(document).keydown(function(e){
var c = e.charCode;
var k = e.keyCode;
if (48 <= c && c <= 57) {
pushButton(String.fromCharCode(c));
}
else if (e.shiftKey) {
switch (k) {
// keyboard
case 187: pushButton("+"); break;
case 186: pushButton("*"); break;
case 189: pushButton("="); break;
case 189: pushButton("-"); break;
case 53 : pushButton("%"); break;
}
} else {
switch (k) {
case 189: pushButton("-"); break;
case 190: pushButton("."); break;
case 13 : pushButton("="); break;
case 8 : pushButton("C"); break;
// tenkey
case 111: pushButton("/"); break;
case 106: pushButton("*"); break;
case 109: pushButton("-"); break;
case 110: pushButton("."); break;
case 107: pushButton("+"); break;
}
}
});
function checkKeyCode() {
main_txt.val(k+":"+String.fromCharCode(k));
}
//
function pushButton(n) {
if (n == "C") {
reset();
updateDisp();
}
else if (n == "+/-") {
disp = parseFloat(disp) * -1;
updateDisp();
}
else if (n == "cny") {
calc_temp();
temp *= cny;
updateDisp();
}
else if (n == "jpy") {
calc_temp();
temp /= cny;
updateDisp();
}
else if (0 <= n && n <= 9 || n == ".") {
disp += "" + n;
updateDisp();
} else {
calc_temp();
disp = "";
op = n;
updateDisp();
if (n == "=") {
disp = temp;
temp = 0;
}
}
}
function calc_temp() {
switch (op) {
case "+": temp = temp + parseFloat(disp); break;
case "-": temp = temp - parseFloat(disp); break;
case "*": temp = temp * parseFloat(disp); break;
case "/": temp = temp / parseFloat(disp); break;
case "%": temp = temp % parseFloat(disp); break;
default:
if (disp != "") {
temp = temp + parseFloat(disp);
}
break;
}
disp = "";
op = "";
}
function updateDisp() {
var s = disp;
if (disp == "") s = temp;
s = insertComma(String(s));
if (op != "") {
s += " [" + op + "]";
}
main_txt.val(s);
}
// 3桁カンマ区切りにする
function insertComma(str) {
var destStr = str;
var tmpStr = "";
while (destStr != (tmpStr = destStr.replace(
/^([+-]?\d+)(\d\d\d)/,"$1,$2"))) {
destStr = tmpStr;
}
return destStr;
}
// レートの取得
$.getJSON("http://api.aoikujira.com/kawase/json",{},
function(e){
cny = parseFloat(e["cny"]);
});
});
--></script>
<style type="text/css"><!--
/* ここに CSS を記述する */
body {
margin:10px; padding:0px;
}
input { width:40px; height:25px;
padding:0; margin: 0;
}
#back {
/*
width:400px; height:400px;
background-image:url("calc-back3.png");
*/
width:300px; height:250px;
background-image:url("calc-back2.png");
}
#outline {
position:absolute;
left:8px;
top:8px;
width:300px; height:250px;
margin:0px; padding:0px;
text-align:center;
line-height: 30px;
}
#display_div {
padding:8px 0 8px 0;
width:100%;
text-align:center;
}
#number_btn_div {
float:left; width:130px;
text-align:left;
padding:0 0 0 30px;
}
#op_btn_div {
text-align:right;
float:right;
width:110px;
padding:0 30px 0 0px;
}
#main_txt {
width:80%;
text-align:right;
}
--></style>
</head>
<body>
<!-- ここに HTML を記述する -->
<div id="back">
<div id="outline">
<br/>
<div id="display_div">
<input id="main_txt" type="text" readonly/>
</div>
<div id="number_btn_div">
<br/>
<input id="btn7" type="button" value="7"/>
<input id="btn8" type="button" value="8"/>
<input id="btn9" type="button" value="9"/>
<br/>
<input id="btn4" type="button" value="4"/>
<input id="btn5" type="button" value="5"/>
<input id="btn6" type="button" value="6"/>
<br/>
<input id="btn1" type="button" value="1"/>
<input id="btn2" type="button" value="2"/>
<input id="btn3" type="button" value="3"/>
<br/>
<input id="btn0" type="button" value="0"/>
<input id="dot_btn" type="button" value="."/>
<input id="rev_btn" type="button" value="+/-"/>
</div>
<div id="op_btn_div">
<input id="ce_btn" type="button" value="C"/>
<input id="close_btn" type="button" value="close"/>
<br/>
<input id="div_btn" type="button" value="/"/>
<input id="jpy_btn" type="button" value="jpy"/>
<br/>
<input id="mul_btn" type="button" value="*"/>
<input id="cny_btn" type="button" value="cny"/>
<br/>
<input id="minus_btn" type="button" value="-"/>
<input id="mod_btn" type="button" value="%"/>
<br/>
<input id="plus_btn" type="button" value="+"/>
<input id="eq_btn" type="button" value="="/>
<br/>
</div>
</div>
</div>
</body>
</html>
