JavaScript スタイルシートサンプル集

TOP / グラフ　電卓

- 1 2 3 >>

2012年02月26日

javascriptで電卓

スポンサード　リンク

簡易電卓






javascript123

計算結果

この電卓は数値，演算子（｢+｣｢-｣｢/｣｢*｣）を入力し｢＝｣を押したときに計算します。
計算はeval関数で実行。　　注） ｢/｣は｢÷｣、｢*｣は｢×｣です。
普通、私たちが使っている電卓は例えば "１＋２"を押して｢×｣を押すと計算されて"３"が
表示され次に"４"を入れ｢＝｣を押すと "３×４"で計算結果は"１２"になります。が
この電卓は"１＋２×４" で四則演算では乗除算が優先されるので"２×４"が
先に計算され"１＋８" で "９"になります。//昔習った算数と同じ結果！！
乗算演算子 ("*") は加算演算子("+")より高い優先順位を持つので、最初に評価されます。

またこの電卓はボタンを押さずに、演算ボックスに計算式を入力して｢＝｣ボタンを押すと
計算することができます。

heteml
【ちょ～簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版！
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバビジネスプロ☆

サンプルソース

<html>
 <head>
<title>javascriptで電卓</title>
 <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>
 <td colspan="3" style="text-align : center;">
  <a href="http://javascript123.seesaa.net/" target="_blank">javascript123</a></td>
 <td><input type="button" value="BS" onClick="bs()" title="右から一文字消去"></td>
</tr>
</tbody>
</table>
 <div id="opeBox">&nbsp;</div>
  <div id="resDiv">
   <span>計算結果<input type="button" value="×" onClick="resClr()"
    title="計算結果 クリア"></span>
  <div id="resBox"></div>
 </div>
</div>
</body>
</html>

`eval(code) 関数`

演算ボックス（テキストエリア）の値は文字列ですが、それがJavaScript式であれば「eval」関数は
それを数値や演算子として評価し、その式の値を返します。

`Math.round` メソッド

このメソッドは小数点以下を四捨五入した整数値を返します。
n = Math.round(123.4567); // nは 123を返します。
Math.round()を使って小数点以下 X桁を四捨五入して表示します。

入力チェック

演算ボックス

先頭が "0"の時,或は｢＝｣を押したあと,"0"又は"."を押すと "0."を表示。
"0"以外の値を押すとその値を表示。
次の演算子が押されるまで、小数点 "."の２度押し禁止。
BSキーで削除して、残った値の最後尾が演算子の時,
つぎに入力された値が "0"又は"." であれば "0."を表示。
演算ボックスに直接入力した場合は入力チェックは解除。

ＢＳキーを押したら

削除した値が小数点 "." であれば小数点入力禁止解除。
削除した値が演算子なら演算子を演算子表示ボックスに退避して
これ以上の削除を禁止。
最後から２文字が"0."であればこれを削除。

算術演算子｢+｣｢-｣｢/｣｢*｣

演算ボックスが"0"のとき"-"以外入力無効。
最後尾の値が演算子なら演算子の入力禁止。
最後尾の値が小数点 "."なら演算子と小数点の入力禁止。

ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバビジネスプロ☆
スタイルシートで電卓をデザイン
 テーブル
 全角/半角 MS-IMEの入力モードの切り替え imeMode
テキストボックス
 ボタン
 text-align プロパティ
 background 背景に関するプロパティ一覧
 borderプロパティ
 border-styleプロパティ; ボーダーのスタイルの設定
 border-radiusプロパティ角丸ボーダー
 CSS3 を使って角丸コーナーを表現する方法 IE9
paddingプロパティ　ボックスの内側の余白
 CSS positionプロパティ
 カラーコード　色見本

タグ：javascript CSS eval() slice()

posted by javaScript at 19:28 | 大阪 ☁ | グラフ　電卓 |

2012年02月09日

CSSで作る横棒グラフ-span要素,利用

スポンサード　リンク

span 要素でグラフのバーを表現　CSS。

20% 75% 5%

評価ランク： ○ 良い　△ 普通　× ダメ

グラフの表示ボックスをdiv 要素で,
span要素の幅,背景色を変えてグラフのバーを作っています。

サンプルソース

<html>
 <head>
<title>CSSで作る横棒グラフ-span要素,利用</title>
 <style type="text/css">
<!--
#grh{ /* グラフの表示ボックス */
    width: 450px;　/* 幅 */
    border: 1px solid #207870; /* 枠線 */
    padding: 3px 6px 0px 3px;  /* 内側余白 */
    background-color : #fffff0;/* 背景色 */
      }

#grh span{ /* グラフ バー */
    display:block;   /* ブロックラベルで表示 */
    border: 1px solid #e6e6fa;
    border-right:2px solid gray;
    border-bottom:2px solid gray;
    text-align: center;   /* 文字の配置 */
    line-height: 2em;   /* 行の高さ */
    margin-bottom: 3px;   /* 外側下 余白 */
    font-size: 1em;
     }

.gBar0{  /* グラフ バーの色,幅 */
    width: 20%;  /* 幅 */
    background-color : aqua; /* 背景色 */
     }

.gBar1{
   width: 75%;
   background-color : pink;
     }

.gBar2{
   width: 5%;
   background-color : gold;
    }

#gTxt span{  /* 評価ランク 表示領域 */
   padding:2px 5px 0px 7px;
   border: 1px solid gray;
   color :teal;
    }
-->
</style>

</head>
<body>
<div id="grh">
    <span class="gBar0">20%</span>
    <span class="gBar1">75%</span>
    <span class="gBar2">5%</span>
</div>
<p id="gTxt"><strong> 評価ランク：</strong> <span class="gBar0">○</span> 良い
　<span class="gBar1">△</span> 普通
　<span class="gBar2">×</span> ダメ
</p>

</body>
</html>

line-heightプロパティ

行の高さを指定します。line-height:値;
ここではspan要素に適用してグラフバーの高さを指定しています。

line-height : normal ;規定値 line-height : 1.5em ; line-height : 2em ;

heteml
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバビジネスプロ☆
徐々に動く、水平棒グラフ- 表のボーダー利用
 CSSで作る横(水平)棒グラフ - 表のボーダー利用
 CSSで作る垂直棒グラフ - 表のボーダー利用
 text-align プロパティ
 borderプロパティ枠線
 paddingプロパティボックスの内側の余白
 background-colorプロパティ　背景色

タグ：SPAN display:block line-height グラフ

posted by javaScript at 20:42 | 大阪 ☁ | グラフ　電卓 |