>> JavaScript入門トップに戻る

タイマーの設定

今回はタイマーの設定について説明します。
JavaScriptはユーザの動作に応じて処理をする以外に、
一定時間ごとに処理を自動的に流すことも可能です。
下記のコードを見てください。
HTMLコード

<font style="background:#530000;" color="yellow" id="watch1">時間が表示されます。</font>

JavaScriptのコード

function Watch()
{
	//日付オブジェクトを生成
	var time= new Date();
	//データを整形
	var month=(String(time.getMonth()+1)).replace(/(^[1-9]$)/,"0$1");
	var day=(String(time.getDate())).replace(/(^[1-9]$)/,"0$1");
	var hour=(String(time.getHours())).replace(/(^[1-9]$)/,"0$1");
	var minute=(String(time.getMinutes())).replace(/(^[1-9]$)/,"0$1");
	var second=(String(time.getSeconds())).replace(/(^[1-9]$)/,"0$1");
	//全部文字としてくっ付ける
	var string=month+"/"+day+" "+hour+":"+minute+":"+second;
	
	var object=document.getElementById("watch1");

	object.innerHTML=string;
	//1秒おきに実行
	setTimeout("Watch()","1000");
}

時間が表示されます。
↑この時計自動で動いてますよね?

コードの解説をしましょう。
まずfontタグにIDを指定しています。
このIDを後から取得して、内部のhtmlコードを書き換えて時刻を表示させます。
次にjavascriptのコードを見てください。
まず、
new Date();
と書いて、日付オブジェクトというものを取得しています。
newというのはオブジェクトを生成するための演算子です。
Dateオブジェクトというのは最初から存在しているオブジェクトで、
引数に日付を指定すると、指定した時刻をオブジェクトとして取得します。
何も指定しない場合は、現在の時刻が返ります。
そこから、色々と取得したデータを整形しています。
正規表現というものを使って、整形しているのですが、この辺は別の講座で説明するのでスルーします。

データ整形後に、getElementById関数を使って、先程のfontタグのオブジェクトを取得しています。
その後、innerHTMLで先程整形したデータを挿入してます。
ここまでの時点で、fontタグ内のHTMLは書き換わりますが、
時計なので一秒おきに再実行してやらねばなりません。
そのために、自動で一秒後に実行する必要があります。
そんなときに使うのが、
setTimeout関数です。
第一引数には、関数の名前、第二引数には何ミリ秒後に実行するかを指定します。
今回は、同じ関数をもう一度実行するので、自分自身のWatch関数を第一引数に、
第二引数に、一秒後に実行したいので、1000ミリ秒後(1秒)と設定しています。
これで、一秒後に呼ばれた関数は、また自分自身を一秒後に呼ぶことになるので、
永遠と処理させつづけることが出来るわけです。

ですが、一番最初の起動だけは、どこかで設定してやらねばなりません、
そこで、bodyタグで、onloadイベントを設定してこのWatch関数を呼び出しています。
これで最初に起動されたwatch関数は永遠と動いてくれるわけです。

補足として、このsetTimeout関数はタイマーIDというものを戻り値として返しています。
このIDを、clearTimeout関数に渡してやると、
現在のタイマーをストップさせることができます。
もし、タイマー稼働中に処理を止めたいときは、あらかじめsetTimeoutの戻り値を取得しといて、
clearTimeout関数で処理を止めてください。

今回の説明は以上です。
次回はクラスについて説明します。

>> 【クラスについて】に進む
>> JavaScript入門トップに戻る
●更新履歴
2016/08/16 Java入門ページにページを幾つか追加
2016/04/08 Java入門ページ作成
2016/03/09 メニューレイアウト変更。ブラウザキャッシュのクリアをお願い致します。
2016/03/09 PDOトランザクション、自動コミットモードをオフ追加
2016/03/09 PDO 例外処理 try catch追加
2016/03/09 PDO update文実行追加
2016/03/09 PDO delete文実行追加
2016/03/09 PDO insert文実行追加
2016/03/09 PDO selectでデータを取得、fetchAll、queryメソッド追加
2016/03/09 PDO bindValueとbindParamの違い追加
2016/03/09 PDO prepare プリペアドステートメントの使い方追加
2016/03/04 ソースコードをクリップボードにコピーする機能を追加
2016/03/04 C言語、C++のページのソースコードを一部修正
2014/01/31 C言語関数一覧ページに11ページほど追加
2014/01/31 C言語関数一覧ページに30ページほど追加
2014/01/30 C言語関数一覧ページ作成中
2013/07/01 レイアウト変更に伴いブラウザキャッシュのクリアをお願いします。
2013/07/01 MySQL入門ページ作成
2013/07/01 PHP入門ページにSQLite学習項目追加
2013/06/25 ドメイン変更、レイアウトを一部変更
2013/03/14 レイアウトを一部変更
2012/08/13 C言語よくある課題・宿題ページ開設!
2012/08/13 シューティングゲーム作成第33章追加!
2012/08/11 ドメイン変更&サーバ移設完了
2012/04/21 シューティングゲームプログラミング第2,3章の内容を修正
2012/04/19 シューティングゲームプログラミング第2章の内容を修正
2012/04/03 Googleカスタム検索を設置!
2012/04/03 シューティングゲームプログラミング第32章追加!
2012/04/03 シューティングゲームプログラミング第31章追加!
2012/03/31 サイトをリニューアルしました!
2012/03/25 シューティングゲームプログラミング第30章追加!
2012/03/19 シューティングゲームプログラミング第29章追加!
2012/03/16 シューティングゲームプログラミング第28章追加!
2012/02/27 シューティングゲームプログラミング第27章追加!
2012/02/03 シューティングゲームプログラミング第26章追加!
2012/01/31 シューティングゲームプログラミング第25章追加!
2012/01/20 シューティングゲームプログラミング第23,24章追加!
2012/01/11 シューティングゲームプログラミング第22章追加!
2012/01/05 トップページ、ゲームプログラミング関連のトップページのデザインを変更
2012/01/04 シューティングゲームプログラミング第21章追加!
2012/01/01 シューティングゲームプログラミング第20章追加!
2011/12/25 シューティングゲームプログラミング第19章追加!
2011/12/22 シューティングゲームプログラミング第18章追加!
2011/12/18 シューティングゲームプログラミング第17章追加!
2011/12/17 シューティングゲームプログラミングページOPEN!
2011/11/21 ゲームプログラミングページOPEN!
2011/11/21 サイトデザインを大幅に変更
2011/11/17 TOPページのデザインを変更。相互リンクページに、複数サイト追加。
2011/11/06 WINAPI学習ページ(33~36章)追加
2011/11/05 WINAPI学習ページ(20~32章)追加
2011/10/27 WINAPI学習ページ(14~19章)追加
2011/10/21 WINAPI学習ページ(13章)追加
2011/10/21 サイトマップ、連絡ページ追加
2011/10/17 WINAPI学習ページ(6~11章)追加
2011/10/16 WINAPI学習ページ(1~5章)追加
2011/10/13 全体のレイアウト変更
2011/10/07 PHP学習ページ(8~11章)追加
2011/10/06 PHP学習ページ(1~7章)作成
2011/10/06 JavaScriptリファレンスページ作成
2011/10/05 C言語学習ページ発展編(10~14章)追加
2011/10/04 C言語学習ページ発展編(1~9章)追加。
2011/10/03 HTML/CSSリファレンスのページ追加。(個々の詳細ページは作成中)
2011/09/30 HTML学習ページ(8章)追加
2011/09/29 JavaScript学習ページ(12~17章)追加
2011/09/28 JavaScript学習ページ(1~11章)追加
2011/09/27 HTML学習ページ(4~7章)追加
2011/09/26 C言語学習ページ(27章)追加、C++学習ページ(17章)、HTML学習ページ(1~3章)追加
2011/09/25 C言語学習ページ(23~26章)を追加
2011/09/24 C++学習ページ(9~16章)追加
2011/09/23 C++学習ページ(3~8章)追加
2011/09/22 C言語の学習ページ(22章)とC++学習ページ(1~2章)追加
2011/09/21 C言語の学習ページ(15章~21章)を追加
2011/09/20 C言語の学習ページ(10章~14章)を追加
2011/09/19 サイト作成(随時更新予定)