<![CDATA[
<!DOCTYPE HTML>
<HTML>
<HEAD>
<style type="text/css">
<!--
#outDiv{ position: relative ; /* 相対配置 */
}
.calTbc{ /* 電卓本体 */
background-color: #c5f1fe; /* 背景色 */
border-style: solid; /* 枠線 実線 */
border-width: 2px 6px 6px 2px; /* 枠線 幅 上,右,下,左 */
border-color: #7e7e7e #a9a9a9; /* 枠線 色 上下,左右 */
-moz-border-radius: 10px; /* 角丸 Firefox */
-webkit-border-radius: 10px; /* 角丸 Safari、Google Chrome */
border-radius: 10px; /* 角丸 IE9 */
font-size: 16px; /* 文字のサイズ */
}
.calTbc input{ /* 数値、演算子ボタン */
width: 55px; /* ボタンの幅 */
color: #ffffff; /* 文字の色 */
background-color: #0000cd;
text-align: center; /* 文字の水平位置 */
border-width: 3px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
font-size: 1em;
font-weight: bold; /* 文字の太さ */
cursor: pointer; /* カーソルの形状 */
}
.calTbc #dispBox{ /* 演算ボックス */
width: 165px;
color: navy;
background-color: #ffffda;
padding-right: 3px;/* 内側余白 */
margin-left: 3px;
text-align: right;
border: 7px #a9a9a9 inset;
font-size: 1.3em;
font-weight: bold;
ime-mode: inactive; /* 入力モード切替 半角,英数 */
}
.calTbc td{
padding: 0px 0px 5px 5px; /* 内側余白 上,右,下,左*/
}
.calTbc th{
padding: 5px 4px; /* 内側余白 上下,左右*/
}
.calTbc #aC{ /* ACボタン */
color: white;
background-color: #cc0000;
margin-right: 4px;
}
.calTbc input[type=button]:hover,
.calTbc #aC:hover{ /* ボタンにマウスが乗ったら背景色変更 */
background-color: #20b2a1;
}
input[type="button"]::-moz-focus-inner{ /* Firefoxのボタンの点線を消す */
border :0px;
}
#opeBox{ /* 演算子表示 ボックス */
width: 15px;
height: 20px;
position : absolute;
top: 16px;
left: 19px;
font-weight: bold;
text-align: center;
color: #ff00ff;
font-size: 1.5em;
}
#resDiv{ /* 計算結果表示ボックス */
width : 250px;
position : absolute;
top : 0px;
left : 290px;
border:1px solid gray;
padding :7px;
color : #000000;
background-color :#fff;
font-size : 1em;
}
#resDiv input{ /* 計算結果表示ボックス クリアボタン */
width : 20px;
height : 20px;
background-color :#ffffe0;
margin-left : 163px;
}
-->
</style>
<script language="JavaScript">
<!--
var eqFlg="false"; // ｢＝｣ 押されたら eqFlg="true"。
var opeVal=""; // 算術演算子格納。
var tenFlg="false"; // ｢.｣小数点 押されたら tenFlg="true"。
var chkStr=""; // 入力値の取り出し。
var chkNan=""; // 文字,数値の判別格納。
function push(num){ // 数値,又は｢.｣ボタンが押された時。numはボタンの値。
H_dispBox=document.getElementById("dispBox"); // 演算ボックス。
H_opeBox=document.getElementById("opeBox"); // 演算子表示ボックス。
// 演算ボックスが"0"のとき "0" か "."が押されたら "0."を表示。(1)
if(( H_dispBox.value=="0"&& num =="0")||( H_dispBox.value=="0"&& num ==".")){
num="0.";tenFlg="true"; }
// 演算ボックスが"0"のとき "0"以外の値を押したら演算ボックスをクリア。
if(H_dispBox.value =="0"&&num !="0"){H_dispBox.value="";}// 新規 num を受け入れ。
if(tenFlg=="true"&& num =="."){num="";} // 小数点２度押し阻止。(2)
//BSキーを押したときの処理。(3)
chkStr=H_dispBox.value.slice(-1); //演算ボックスの最後尾の値,取り出し。
chkNan=isNaN(chkStr);//文字,数値の判別 isNaNは,文字ならtrue,数値ならfalseを返す。
if(chkNan==true && chkStr!="."){ //最後尾が演算子の時。
if(num=="."||num=="0"){num="0.";tenFlg="true";} //numが "."か "0"なら"0."を表示。
}
// ｢＝｣のあと 演算子が押されてなければ、演算ボックスをクリア。
if(eqFlg=="true"&&opeVal==""){ H_dispBox.value=""; // 新規 numを表示。
if(num=="."||num=="0"){num="0.";tenFlg="true";} // (1)
eqFlg="false"; }
// ｢＝｣のあと 演算子押されていれば計算継続。
if(opeVal !=""){
if(num=="."||num=="0"){num="0.";tenFlg="true";} // (1)
H_dispBox.value += opeVal+num; // 演算ボックスの値＋演算子＋ボタンの値。
H_opeBox.innerHTML=""; opeVal=""; // 演算子クリア。
}
else { H_dispBox.value += num; // 演算ボックスの値＋ボタンの値。
if(num=="."){tenFlg="true";}
}
}
// Back Spaceキー 後ろから一文字削除。
function bs(){
if(eqFlg=="true"){return} // ｢＝｣ が押されたら無効。
if(opeVal!=""){return} // 演算子 が押されていたら無効。
chkStr=H_dispBox.value.slice(-1); // 演算ボックスの最後尾の値,取得。
if(chkStr=="."){tenFlg="false";} //小数点２度押し防止、解除。(5)
chkNan=isNaN(chkStr); // 文字,数値の判別 文字ならtrue,数値ならfalse。
if(chkNan==true && chkStr!="."){ // 最後尾の文字が演算子なら。(6)
opeVal=chkStr; H_opeBox.innerHTML=opeVal; // 演算子を演算子表示ボックスに退避。
}
chkStr=H_dispBox.value.slice(-2); // 最後から２文字を取得。(7)
if( chkStr=="0."){H_dispBox.value=H_dispBox.value.slice(0, -1);} // "0."なら"."を削除。
H_dispBox.value=H_dispBox.value.slice(0, -1); // 演算ボックスの値,後ろから１文字削除。
if(H_dispBox.value==""){ clr();} //全部削除したら,演算ボックスをリセット。
}
// 算術演算子 ｢+｣ ｢-｣ ｢/｣ ｢*｣ を入力したとき。
function opePush(num){
H_dispBox=document.getElementById("dispBox"); // 演算ボックス。
H_opeBox=document.getElementById("opeBox"); // 演算子表示ボックス。
if( H_dispBox.value=="0"&& num !="-"){return} // "0"のとき"-"以外入力無効。(8)
chkStr=H_dispBox.value.slice(-1); // 演算ボックスの最後尾の値。
chkStr=isNaN(chkStr); // 文字,数値の判別 文字列ならtrue,数値ならfalse。
if(chkStr==true){return} // 演算子なら演算子の, "."なら演算子と"."の入力禁止。(9)
opeVal=num;
H_opeBox.innerHTML=opeVal; // 演算子を表示。
eqFlg="false"; tenFlg="false";
}
// ｢＝｣ を押すと計算します。
function equal(){
try{ // 計算結果出力。
resVal=document.getElementById("resBox");//計算結果表示ボックス
keta=100000; // 小数点以下桁数５桁まで表示。
coDe=H_dispBox.value; // 計算式。
toTal=eval(coDe); // 計算結果 codeがJavaScript式であればその式の値を返す。
toTal=Math.round(toTal*keta) / keta; // 計算結果の小数点以下6桁を四捨五入。
H_dispBox.value=toTal; // 演算ボックスに表示。
resVal.innerHTML=resVal.innerHTML+"<br>"+coDe+" = "+toTal;// 計算結果ボックスに表示。
H_opeBox.innerHTML="";opeVal="";
eqFlg="true";tenFlg="false";
}
catch(e){ // エラー発生(入力値が不正)なら。
H_dispBox.value = e.description;}
}
// try 〜 catch 例外処理、エラー処理
function clr(){ //オールクリア すべての値をリセット。
H_dispBox.value="0";
H_opeBox.innerHTML="";
opeVal="";
eqFlg="false";
tenFlg="false";
}
function tBox(){ // 演算ボックスがフォーカスされたら。
eqFlg="false"; }
function resClr(){ //計算結果表示ボックス クリア。
resVal.innerHTML=""; }
//-->
</script>
</HEAD>
<BODY>
<div id="outDiv">
<table border="0" class="calTbc" cellpadding="0">
<tbody>
<tr>
<th colspan="3">
<input type="text" value="0" id="dispBox" onfocus="tBox()" title="演算ボックス"></th>
<th><input type="button" value="AC" onclick="clr()" id="aC" title="すべてクリア"></th>
</tr>
<tr>
<td><input type="button" value="７" onclick="push(7)"></td>
<td><input type="button" value="８" onClick="push(8)"></td>
<td><input type="button" value="９" onClick="push(9)"></td>
<td><input type="button" value="÷" onClick="opePush('/')"></td>
</tr>
<tr>
<td><input type="button" value="４" onClick="push(4)"></td>
<td><input type="button" value="５" onClick="push(5)"></td>
<td><input type="button" value="６" onClick="push(6)"></td>
<td><input type="button" value="×" onClick="opePush('*')"></td>
</tr>
<tr>
<td><input type="button" value="１" onClick="push(1)"></td>
<td><input type="button" value="２" onClick="push(2)"></td>
<td><input type="button" value="３" onClick="push(3)"></td>
<td><input type="button" value="−" onClick="opePush('-')"></td>
</tr>
<tr>
<td><input type="button" value="０" onClick="push(0)"></td>
<td><input type="button" value=" ．" onclick="push('.')"></td>
<td><input type="button" value="＝" onClick="equal()" title="計算 実行"></td>
<td><input type="button" value="＋" onClick="opePush('+')"></td>
</tr>
</tr>
</tbody>
</table>
<div id="opeBox"> </div>
<div id="resDiv">
<span>計算結果<input type="button" value="×" onClick="resClr()"
title="計算結果 クリア"></span>
<div id="resBox"></div>
</div>
</div>
<br>
JavaScript スタイルシートサンプル集 （ http://javascript123.seesaa.net ） さんより、 サンプルソースをいただきました。<br><br>
</BODY>
</HTML>
]]>