2012年02月26日

javascriptで電卓

スポンサード リンク

 簡易電卓

javascript123
 
計算結果

  この電卓は数値,演算子( 「+」 「-」 「/」 「*」 )を入力し 「=」 を押したときに計算します。
計算はeval関数で実行。  注) 「/」は「÷」、「*」は「×」です。
普通、私たちが使っている 電卓は例えば "1+2"を押して「×」を押すと計算されて"3"が
表示され次に"4"を入れ「=」 を押すと "3×4"で計算結果は"12"になります。 が
この電卓は"1+2×4" で四則演算では乗除算が優先されるので"2×4"が
先に計算され"1+8" で "9"になります。//昔習った算数と同じ結果!!
乗算演算子 ("*") は加算演算子("+")より高い優先順位を持つので、最初に評価されます。

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

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

サンプルソース

<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度押し阻止。(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";} //小数点2度押し防止、解除。(5)
 chkNan=isNaN(chkStr); // 文字,数値の判別 文字ならtrue,数値ならfalse。
  if(chkNan==true && chkStr!="."){ // 最後尾の文字が演算子なら。(6)
   opeVal=chkStr; H_opeBox.innerHTML=opeVal; // 演算子を演算子表示ボックスに退避。
       } 
chkStr=H_dispBox.value.slice(-2); // 最後から2文字を取得。(7)
 if( chkStr=="0."){H_dispBox.value=H_dispBox.value.slice(0, -1);} // "0."なら"."を削除。
 H_dispBox.value=H_dispBox.value.slice(0, -1); // 演算ボックスの値,後ろから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; // 小数点以下桁数5桁まで表示。
  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="7" onclick="push(7)"></td>
 <td><input type="button" value="8" onClick="push(8)"></td>
 <td><input type="button" value="9" onClick="push(9)"></td>
 <td><input type="button" value="÷" onClick="opePush('/')"></td>
</tr>
<tr>
 <td><input type="button" value="4" onClick="push(4)"></td>
 <td><input type="button" value="5" onClick="push(5)"></td>
 <td><input type="button" value="6" onClick="push(6)"></td>
 <td><input type="button" value="×" onClick="opePush('*')"></td>
</tr>
<tr>
 <td><input type="button" value="1" onClick="push(1)"></td>
 <td><input type="button" value="2" onClick="push(2)"></td>
 <td><input type="button" value="3" onClick="push(3)"></td>
 <td><input type="button" value="−" onClick="opePush('-')"></td>
</tr>
<tr>
 <td><input type="button" value="0" 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桁を四捨五入して表示します。
入力チェック
演算ボックス
  1. 先頭が "0"の時,或は「=」を押したあと,"0"又は"."を押すと "0."を表示。
    "0"以外の値を押すとその値を表示。
  2. 次の演算子が押されるまで、小数点 "."の2度押し禁止。
  3. BSキーで削除して、残った値の最後尾が演算子の時,
    つぎに入力された値が "0"又は"." であれば "0."を表示。
  4. 演算ボックスに直接入力した場合は入力チェックは解除。
BSキーを押したら
  1. 削除した値が 小数点 "." であれば小数点入力禁止 解除。
  2. 削除した値が 演算子なら演算子を演算子表示ボックスに退避して
    これ以上の削除を禁止。
  3. 最後から2文字が"0."であればこれを削除。
算術演算子 「+」 「-」 「/」 「*」
  1. 演算ボックスが"0"のとき"-"以外入力無効。
  2. 最後尾の値が演算子なら演算子の入力禁止。
    最後尾の値が小数点 "."なら演算子と小数点の入力禁止。

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

posted by javaScript at 19:28 | 大阪 ☁ | グラフ 電卓 | このブログの読者になる | 更新情報をチェックする

2012年02月09日

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

スポンサード リンク

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

20% 75% 5%

評価ランク: 良い   普通  × ダメ

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

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

サンプルソース

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

posted by javaScript at 20:42 | 大阪 ☁ | グラフ 電卓 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。