|
Step.6 - リアルタイム表示その２
|
日付や時間を表示するのは、もうありきたり？ だったら表現を変えれば、また新鮮になります。同じ事でもアイデア勝負！(^^; |
| Step テーマ ● * 演算子 (掛け算) ● / 演算子 (割り算) ● Math.floor (小数点切り捨て) |
実行例 |
リスト<script type="text/javascript"><!-- myCnt = 1; function myFunc(){ document.myForm.myFormSec.value = myCnt + "秒"; document.myForm.myFormYen.value = ( (Math.floor(myCnt/180)*10) + 10 ) + "円"; myCnt = myCnt + 1; } // --></script> <form name="myForm"> こんなサイトに <input type="text" size="10" name="myFormSec"> も付き合ってくれて、ありがとうございます。<br> こんなサイトに電話代を <input type="text" size="10" name="myFormYen"> も使わせて、ごめんなさい。 </form> <script type="text/javascript"><!-- setInterval("myFunc()",1000); // --></script> |
| サンプルだけの HTMLは こちらへ |
説明このページを表示して 何秒経過しているのかと、このページを表示して いくら電話代がかかっているのかを表示します。 「電話代!?」 「はい、このサンプルを作った時代は 1999年。モデムをつかって電話回線でインターネットに接続していた時代なので、電話代が発生していたのです」 ^^; 基本的な流れは Step.5 と同じです。 おや？ お気付きでしょうか？ 関数定義のところで、 myCnt = 1; が、function の外にあります。 これは グローバル変数 といいます。ちなみに function の 括弧{ } の中で宣言したものを、ローカル変数といいます。 この２つの変数の概念ですが、グローバル変数は あらゆる関数(function)で使えるのに対して、ローカル変数はその関数内だけでしか使えません。 ローカル変数はその関数の処理が終われば変数は消滅しますが、グローバル変数は ページを更新するかどこかへリンクするまで 消滅せずに中身の内容も保持します。 今回は後者です。１秒単位で myCnt の値を１ずつカウントさせて その値を保持させたいので、ローカル変数だったら都合が悪いのです。 ※ ローカル変数でも var にて変数宣言していなければ、グローバル変数として扱われますが この辺はブラウザによって仕様が変わります (var は、Step.2 参照)。 ※ 当講座は var宣言は 面倒くさいので省いています。(省略できるものは 省略する) myCnt = 1; は、ページを開いたときに 1回とおるだけで、あとはページを更新するか 再度ページに来るまで ここに処理がくることはありません。 つまり、myCnt の 初期値 をセットしたわけです。 今回のプログラムの流れは ページを開いてから何秒たったかが わかればよいので いたってシンプルです。 setInterval にて 1秒単位に myFunc() が呼ばれるので、myFunc() が処理された回数が その経過秒となるわけです。 その経過秒を myCnt をカウントしながら フォームにセットして表示させています。 myCnt = myCnt + 1; 電話代表示のところに、なにやら数学式がありますね。いえ、算数式です。(^^; ( Math.floor( myCnt / 180 ) *10 ) + 10 ここでは、電話代は 3分 10円としています。 つまり、使用秒÷３分×１０円＝電話代です。最初の３分も１０円とられるので、それに１０円足します。 よって、( myCnt / 180 * 10 ) + 10 になります。 割り算は「 / 」、掛け算は「 * 」の記号を使います。 Math.floor( myCnt / 180 ) はい、Math は 数学関数 です。 Math.floor() は、小数点を切り捨ててくれる関数です。 使用秒÷３分は、余り(小数点) がでるので Math.floor() で 小数点以下を切り捨てているのです。 数学関数というだけあって サイン、コサイン、タンジェントやらいろいろ計算できます。 私は文系なので使うことは まずありません。この辺の Step で使いそうなものを まとめます。
|