時計を作ってみる

指定した時間が経過した後に何か処理をしたかったり、一定時間ごとに処理を繰り返したい、ということがあります。javaScriptには、そのような場合に便利なタイマーというものがあります。

タイマーというと、身近なところだとスマホの「ストップウォッチ」があるかと思います、それと同様に。一定時間経過後に好きな処理をさせることができます。

このタイマー機能を使うにはwindowオブジェクトに用意されているsetTimeoutメソッドを使用します。

サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>デジタル時計を作成してみる</title>
   
</head>
<body>
    <form name="timeWatch"><p>
    <input type="text" name="hour">時
    <input type="text" name="minute">分
    <input type="text" name="sec">秒
    </p></form>

<script>
    var boxHour,boxMin,boxSec;
    var timer;

    window.onload = init;
    
function init(){
    
    boxHour = document.timeWatch.hour;
    boxMin  = document.timeWatch.minute;
    boxSec  = document.timeWatch.sec;
    
    setTime();
}
function setTime(){

    //Dateオブジェクト生成
    var now = new Date();
    
    //現在の時、分、秒を変数に代入
    var hour = now.getHours();
    var min  = now.getMinutes();
    var sec  = now.getSeconds();
    
    //数値が一ケタの場合、文字「０」を先頭に追加
    if( hour < 10 ) hour = "0" + hour;
    if( min  < 10  ) min = "0" + min;
    if( sec  < 10  ) sec = "0" + sec;

    //textフィールドのvalueプロパティに値を代入
    boxHour.value = hour;
    boxMin.value  = min;
    boxSec.value  = sec;
    
    //１秒ごとに 自分自身(setTime関数)を呼び出すようにしている
    timer = setTimeout("setTime()",1000);

}
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>デジタル時計を作成してみる</title>

</head>

<body>

<input type="text" name="hour">時

<input type="text" name="minute">分

<input type="text" name="sec">秒

</p></form>

var boxHour,boxMin,boxSec;

var timer;

window.onload = init;

function init(){

boxHour = document.timeWatch.hour;

boxMin = document.timeWatch.minute;

boxSec = document.timeWatch.sec;

setTime();

}

function setTime(){

//Dateオブジェクト生成

var now = new Date();

//現在の時、分、秒を変数に代入

var hour = now.getHours();

var min = now.getMinutes();

var sec = now.getSeconds();

//数値が一ケタの場合、文字「０」を先頭に追加

if( hour < 10 ) hour = "0" + hour;

if( min < 10 ) min = "0" + min;

if( sec < 10 ) sec = "0" + sec;

//textフィールドのvalueプロパティに値を代入

boxHour.value = hour;

boxMin.value = min;

boxSec.value = sec;

//１秒ごとに自分自身(setTime関数)を呼び出すようにしている

timer = setTimeout("setTime()",1000);

}

</script>

</body>

</html>

setTimeoutメソッド

setTimeoutは、指定した時間後に指定した処理を実行するwindowオブジェクトのメソッドです。下記のように書きます。

　変数 = window.setTimeout("実行したいステートメント",時間(msec));

1	変数 = window.setTimeout("実行したいステートメント",時間(msec));

戻り値はタイマーIDと呼ばれるタイマーを識別する値です。windowは省略できます。たとえば、10秒後にダイアログボックスを表示したいときは以下のように書きます。

　timer = setTimeout("alert('こんにちは')",10000);

1	timer = setTimeout("alert('こんにちは')",10000);

処理を繰り返したい

同じ処理を繰り返すには、関数の内部で、setTimeoutメソッドを実行し、自分自身を呼び出すようにします。setTime関数では、最後にsetTimeoutメソッドで1秒ごと(1000ミリ秒)ごとにsetTime関数自身を呼び出すことで表示を更新しています。

タイマーを停止する

起動したタイマーは停止することができます。そのためには、setTimeoutの戻り値であるタイマーIDを引数にして、clearTimeoutメソッドを使用します。

　clearTimeout(timer); //起動したタイマーIDを引数に指定する

1	clearTimeout(timer); //起動したタイマーIDを引数に指定する

タイマーを使い、Webページに制限時間を設定する

タイマーを使うと、Webページの閲覧時間に制限を加えることができます。ある程度の時間あるページを眺めていると、強制的に別のページに飛ばされる処理です。

そのためには、setTimeoutメソッドから、WEｂページのアドレスを管理するlocationオブジェクトのreplaceメソッドを呼びます。replaceメソッドは、現在のWebページの内容を引数で指定したアドレスのWebページに置き換えるメソッドです。

例えば１０秒経過後にGoogleのページに遷移するには、以下のように書きます。

window.onload = move;
function move(){
　setTimeout("location.replace('http://google.co.jp')",10000);
}

window.onload = move;

function move(){

　setTimeout("location.replace('http://google.co.jp')",10000);

}