Step.6 - リアルタイム表示その2


日付や時間を表示するのは、もうありきたり? だったら表現を変えれば、また新鮮になります。同じ事でもアイデア勝負!(^^;


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 の 括弧{ } の中で宣言したものを、ローカル変数といいます。

この2つの変数の概念ですが、グローバル変数は あらゆる関数(function)で使えるのに対して、ローカル変数はその関数内だけでしか使えません。
ローカル変数はその関数の処理が終われば変数は消滅しますが、グローバル変数は ページを更新するかどこかへリンクするまで 消滅せずに中身の内容も保持します。

今回は後者です。1秒単位で myCnt の値を1ずつカウントさせて その値を保持させたいので、ローカル変数だったら都合が悪いのです。
※ ローカル変数でも 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円としています。
つまり、使用秒÷3分×10円=電話代です。最初の3分も10円とられるので、それに10円足します。

よって、( myCnt / 180 * 10 ) + 10 になります。

割り算は「 / 」、掛け算は「 * 」の記号を使います。

Math.floor( myCnt / 180 )
はい、Math数学関数 です。 Math.floor() は、小数点を切り捨ててくれる関数です。
使用秒÷3分は、余り(小数点) がでるので Math.floor() で 小数点以下を切り捨てているのです。

数学関数というだけあって サイン、コサイン、タンジェントやらいろいろ計算できます。
私は文系なので使うことは まずありません。この辺の Step で使いそうなものを まとめます。

書式説明使用例結果
Math.floor(n)小数点以下 切り捨てMath.floor(1234.56)
Math.ceil(n)小数点以下 切り上げMath.ceil(1234.56)
Math.round(n)小数点以下 四捨五入Math.round(1234.56)
Math.abs(n)絶対値Math.abs(-1234)
Math.random()乱数Math.random()
※ 説明の茶色の部分はベタ書きではなく、ちゃんと JavaScript で処理した結果を表示しています。 (^^;