JavaScriptのabc
６．２つのタイマー
● ２つのタイマー（その１）
画面上にさりげなく置かれた時計、時間が来たら処理を始めるアラーム、これらのタイマーを作りま～す
タイマーを作るには、windowオブジェクトのsetIntervalメソッドかsetTimoutメソッドを使い、これら自体はそんなに難しいものではありません。
まずこの２つのメソッドを理解しましょう。両方に共通する基本的な機能は、「ある時間で、決められた関数を呼び出し実行する」事です。
setIntervalメソッド
♣ 一定間隔毎に、指定した関数を呼び出す。
書き方 window.setInterval(関数,呼び出し間隔)
タイマーを停止したい場合は、clearIntervalメソッドを使う。
setTimeoutメソッド
♣ 一定時間後に、指定した関数を呼び出す。
書き方 window.setTimeout(関数,呼び出までの時間)
タイマーを停止したい場合は、clearTimeoutメソッドを使う。
ちなみに、呼び出し間隔、呼び出しまでの時間の単位は１/１０００秒です。
今回は、setIntervalメソッドを使ってデジタル時計を作ってみますが、ロジックを判り安くする為に３段階に分けてプログラムします。
ステップ１ 画面が立ちあがった時に「現在時刻」を表示
body中のIDが「xx」の文列を、現在の時、分、秒に書き換える関数を作ります。関数の名前は「startWatch」と付け、画面立ち上がりと同時に起動する様にしました。
動きは下のボタンから確認して下さい。
ステップ２ 表示される「現在時刻」の時、分、秒全てを２ケタで表示
関数の名前は「startWatch」の中で、現在の時、分、秒が「１０」以下の時には頭に「０」を付けて、いかなる場合も２ケタ表示されるようにします。条件式は「if分岐」を使いました。
動きは下のボタンから確認して下さい。
ステップ３ １秒毎に「現在時刻」が更新される様に表示・・・完成
ここでsetIntervalメソッドが登場します。関数が１秒毎に呼び出される様にします。
「window.setInterval(startWatch,1000);」の1行の追加です。
動きは下のボタンから確認して下さい。
画面上での見映えを良くするにはスタイルを指定すれば良いのですが、ここでは割愛します。
今回はsetIntervalメソッドで時計を作って見ました。
setIntervalメソッドを使えば、画面上の写真を一定間隔で自動的に差し替えできます。次回は、この写真自動差し替えをやってみたいと思います。
● ２つのタイマー（その２）
setIntervalメソッドを使って、画面上の写真を２秒ごとに自動差し替えしまーす。
今回は４枚の写真を用意し、「pictureChange」と言う関数を作りました。
この関数は、カウンタ（１～４）に対応して、body中のID「xx」の写真を別々の写真で置き換え、さらにカウントが４になったら１に戻す、と言うものです。
この関数を、「window.setInterval(pictureChange,2000);」を使って２秒毎に呼び出せば、狙いの動きをします。
実際のプログラムは下の様になりました。
動きは下のボタンから確認して下さい。
良いですねー。これなら実際のホームページに使えそう。
今回まででsetIntervalメソッドの使い方は理解できました。
次回は、setTimeoutメソッドを使ってアラーム作ってみます。
● ２つのタイマー（その３）
今回は、setTimeoutメソッドを使って、クリック後２秒でアラーム画面が出て来るプログラムを作りまーす。
「１６．２つのタイマー（その１）」で学んだ２つ目のタイマーです。復習すると、
♣ 一定時間後に、指定した関数を呼び出す。
書き方 window.setTimeout(関数,呼び出までの時間)
動きとしては、画面上の「ここをクリックしてアラーム開始」をクリックすると、その文字が「タイマー動作中」に変わり、２秒後には「闘魂」の絵に変わる様にします。
プログラムとしては、まずonClickで関数setAlarmを起動し、この関数の中で文字列を「タイマー動作中」に置き換えて、「window.setTimeoutl(闘魂の絵に置き換える関数,2000);」と言う２秒アラームを設定します。
実際のプログラムは下の様になりました。
動きは下のボタンから確認して下さい。
今回まで計３回でsetIntervalメソッド、setTimeoutメソッドを使ったタイマーを作ってみました。
次回は、eventオブジェクトを使って写真ギャラリーを作りますが、大苦戦です。
