2012年01月30日

スタイルシートで電卓をデザイン

スポンサード リンク

 <table>要素と <input>要素の text,button属性 で作成

 電卓本体は<table>で、計算表示ボックスは<input type="text">で
入力ボタンは<input type="button">で作り、それぞれ
スタイルシートで装飾しています。
 *デザインだけです。動作はしません!!

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

サンプルソース

<html>
 <head>
<title>スタイルシートで電卓をデザイン</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;
    }
-->
</style>
</head>
<body>
<div style="position : relative;">
<table border="0" class="calTbc" cellpadding="0">
 <tbody>
  <tr>
    <th colspan="3"><input type="text" value="0" id="dispBox" title="計算表示ボックス"></th>
    <th><input type="button" value="AC" id="aC" title="すべてクリア"></th>
  </tr>
  <tr>
   <td><input type="button" value="7"></td>
   <td><input type="button" value="8"></td>
   <td><input type="button" value="9"></td>
   <td><input type="button" value="÷"></td>
  </tr>
  <tr>
   <td><input type="button" value="4"></td>
   <td><input type="button" value="5"></td>
   <td><input type="button" value="6"></td>
   <td><input type="button" value="×"></td>
  </tr>
  <tr>
   <td><input type="button" value="1"></td>
   <td><input type="button" value="2"></td>
   <td><input type="button" value="3"></td>
   <td><input type="button" value="−"></td>
  </tr>
  <tr>
   <td><input type="button" value="0"></td>
   <td><input type="button" value=" ."></td>
   <td><input type="button" value="=" title="計算 実行"></td>
   <td><input type="button" value="+"></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" title="右から一文字消去"></td>
  </tr>
</tbody>
</table>
<div id="opeBox">+</div>
</div>
</body>
</html>
一行テキストボックス
 <input type="text" value="テキストボックス">
type属性の値に"text"を設定すると一行テキスト入力ボックスが作成できます。
valueは入力ボックスに表示する初期値です。ボックスの装飾はスタイルシートで
指定しています。
汎用ボタン
 <input type="button" value="ボタン" onclick="Javascript:alert(this.value)">
type属性の値に"button"を設定すると汎用ボタンが作成できます。
valueはボタンに表示するテキストです。onClickイベントで
スクリプトを作動させるときに、よく使用します。
Firefoxでボタンの点線を消す
button  Firefoxではボタンをクリックするとこのような囲み点線が現れます。
 これを消去するスタイルシートです。

Firefoxのボタンの囲み点線を消去。
input[type="button"]::-moz-focus-inner{
border :0px;
}

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



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

2011年11月28日

徐々に動く、水平棒グラフ- 表のボーダー利用

スポンサード リンク

 table ボーダーで水平棒グラフ。

好きな松茸料理、アンケート結果。
焼き松茸  
松茸ご飯  
土瓶蒸し  
網焼き  
食べない  
合計:

入力欄(テキストボックス)の値を変更するとグラフの描画が始まります。
以前に書いた、CSSで作る横(水平)棒グラフ - 表のボーダー利用を基にしています。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>徐々に動く、水平棒グラフ-表のボーダー利用</title>
 <style type="text/css">
   <!--
#tDiv{ /*表を包むボックス*/
    border: 1px solid #9ca8a8; /*ボーダー*/
    background-color : linen; /* 背景色 */
    padding:3px; /* 内側余白 */
    width:510px;
       }

#cap{ /*タイトル*/
   color : teal; /* 前景色 */
   text-align : center; /* 文字中央寄せ */
   font-weight : bold; /* 文字太さ */
   padding:5px 0px; /* 内側余白 */
   width:510px;
      }

#gTbl th{ /* 見出しセル*/
   color : darkred;
   text-align : right;
     }

#gTbl input[type="text"]{ /*一行テキスト入力欄*/
   color : blue;
   background-color :snow;
   text-align : right;
   width : 40px;
   ime-mode:inactive;  /*半角入力モード*/
     }

#kei{
   text-align : right;
   width : 40px;
     }

 /*上記のスタイルは動作に関係なし。なくても描画します。*/
-->
</style>
<script language="JavaScript">
<!--  // ここで使っているグラフとは tdセルの左側のborderのことです。
tVal=new Array();// 配列 テキストボックスの値,格納
sVal=new Array();// 配列テキストボックスの値,格納,ソート用
clr=new Array("purple","fuchsia","red","lime","blue"); //グラフの色,配列
gWidth=300; //最大数値のグラフの幅

function showGraph(){
 cnt=0; total=0; maxVal=0; flg=0;
  Tbl=document.getElementById("gTbl");
   tBOX  = Tbl.getElementsByTagName('input');
for (i=0;i<tBOX.length;i++){
 sVal[i]=tVal[i]=tBOX[i].value;//テキストボックスの値取得
  if(String(sVal[i]).match( /[^0-9\.]+/g ) ){  //入力チェック 数値0-9以外なら
                     alert("入力できるのは半角数値のみです。");
                       return false;
                        }
       total+=parseInt(tVal[i]);//テキストボックスの合計値
                      //parseInt 文字列を整数値に変換。小数点以下は切り捨て。
tBOX[i].onchange =function(){showGraph();}//テキストボックスの値が変わったら
      }
maxVal = sVal.sort(function(a, b){ return(b - a); })[0]; //テキストボックスの最大値
document.getElementById("kei").value=total;
  graph();
   }

function graph(){
 for (i=0;i<tVal.length;i++){
  
   brWidth=Math.round(gWidth/maxVal*tVal[i]); //個々のグラフの幅
    if(cnt <= brWidth){ flg=cnt;
     gDraw(); //グラフ描画
      Tbl.rows[i].cells[2].innerHTML="&nbsp;"; // % 表示しない
            }
   else{ flg=brWidth;
    gDraw();
     percnt=Math.round(tVal[i]*100/total); //パーセント 取得
      Tbl.rows[i].cells[2].innerHTML="&nbsp;"+" ("+percnt+"%)";// % 表示
          }
     }
       if (cnt <= gWidth){
        setTimeout("graph();", 10); // 10ミリ秒後 graph()を実行
         cnt += 2; // グラフ 幅の増加量 変数'cnt'は 2 4 6 8 と増えていく
          }
      }
function gDraw(){ //ボーダーの幅と色の設定
 Tbl.rows[i].cells[2].style.borderLeftWidth=flg+"px"; 
  Tbl.rows[i].cells[2].style.borderLeftStyle="solid";
   Tbl.rows[i].cells[2].style.borderLeftColor=clr[i];
    }

try{
        window.addEventListener("load",showGraph,false);
}catch(e){
        window.attachEvent("onload",showGraph);
}
   // try 〜 catch   例外処理、エラー処理
  // イベントリスナー addEventListener,attachEventメソッド // --> </script> </head> <body> <div id="cap">好きな松茸料理、アンケート結果。</div> <div id="tDiv"> <table border="0" cellspacing="6" id="gTbl"> <tr> <th>焼き松茸</th> <td><input type="text" value="200"></td> <td> </td> </tr> <tr> <th>松茸ご飯</th> <td><input type="text" value="280"></td> <td> </td> </tr> <tr> <th>土瓶蒸し</th> <td><input type="text" value="350"></td> <td> </td> </tr> <tr> <th>網焼き</th> <td><input type="text" value="160"></td> <td> </td> </tr> <tr> <th>食べない</th> <td><input type="text" value="10"></td> <td> </td> </tr> </table> <div style="margin-left:33px;"> <span style="font-weight : bold;">合計:</span> <input type="text" id="kei" readonly value="1000">人</div> </div> </body> </html>
徐々にグラフ動かすには
setTimeout("fnc()",msec)関数を使用します。
指定したmsecミリ秒が経過すると fnc()を実行します。
上記のサンプルでは
関数'graph()'を10ミリ秒ごとに呼び出しテキストボックスのそれぞれの値に
対応するグラフを描画していきます。
borderプロパティ
ボーダーの線種、幅、色の設定をおこないます。
borderプロパティ css

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
JavaScript setTimeout , clearTimeout
CSSで作る横(水平)棒グラフ - 表のボーダー利用
CSSで作る垂直棒グラフ - 表のボーダー利用
テーブル
text-align プロパティ css
borderプロパティ css
border-styleプロパティ; ボーダーのスタイルの設定
border-radiusプロパティ 角丸ボーダー
paddingプロパティ ボックスの内側の余白
CSS positionプロパティ
カラーコード 色見本

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

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