第67回 「画像を定期的に点滅させる」


 今回は画像を定期的に点滅させるプログラムについて説明します。
JavaScriptでは定期的な処理(タイマー処理)を行う命令が4つ用意されています。


●setTimeout
 指定された関数/命令を指定時間後に1回実行する

●setInterval
 指定された関数/命令を指定時間毎に実行する

●clearTimeout
 setTimeoutで指定されたタイマーをクリアする

●clearInterval
 setIntervalで指定されたタイマーをクリアする


 setTimeoutとclearTimeout、setIntervalとclearIntervalが、それぞれペアになっています。
 今回のように定期的に画像を点滅させる場合には、一度設定してしまえば定期的に実行するsetIntervalを使うと便利です。
 setIntervalは
 
timerID = setInterval(呼び出し関数・命令, 間隔)

 のように指定します。一度タイマーを設定し二度とクリアしないのであればtimerIDに代入する必要はなく
 
setInterval(呼び出し関数・命令, 間隔)

 のように書いても構いません。呼び出し関数名がabcであれば
 
setInterval("abc()", 間隔)

のように""で囲んで指定します。実行する間隔ですが「1秒=1000」となっています。つまり1秒ごとに関数abcを呼び出すには以下のように書きます。

setInterval("abc()", 1000)

 以下のプログラムが前回のプログラムを改良し0.5秒間隔で点滅するようにしたものです。

<html>
<head>
<title></title>
<style type="text/css"><!--
#myIMG {
visibility:show;
}
--></style>
<script language="JavaScript"><!--
function blinkImage()
{
dType = document.getElementById("myIMG").style.visibility;
if (dType == "visible")
{
document.getElementById("myIMG").style.visibility = "hidden";
}else{
document.getElementById("myIMG").style.visibility = "visible";
}
}
// --></script>
</head>
<body onLoad="setInterval('blinkImage()',500)">
<img src="photo1.jpg" id="myIMG">
</body>
</html>


 点滅方法ですが、現在の画像の表示状態を読み出して表示されていれば非表示、非表示であれば表示するようにしているだけです。改良すれば、もっと簡潔にすることも可能です。
 
 ついでにsetTimeoutを使った場合のサンプルも以下に示します。setIntervalと違い1度しか呼び出さないため関数内で毎回setTimeoutを実行する必要があります。
 
<html>
<head>
<title></title>
<style type="text/css"><!--
#myIMG {
visibility:show;
}
--></style>
<script language="JavaScript"><!--
function blinkImage()
{
dType = document.getElementById("myIMG").style.visibility;
if (dType == "visible")
{
document.getElementById("myIMG").style.visibility = "hidden";
}else{
document.getElementById("myIMG").style.visibility = "visible";
}
setTimeout('blinkImage()',500);
}
// --></script>
</head>
<body onLoad="setTimeout('blinkImage()',500)">
<img src="photo1.jpg" id="myIMG">
</body>
</html>


 次回は画像を定期的に移動させてみます。




2002-2004 Copyright KaZuhiro FuRuhata (古籏一浩)