カウントダウンタイマー１

カウントダウンタイマーその１

JavaScriptのTimerを使って、カウントダウンタイマーを作る方法についてみていきましょう。本当はスタートと現在の時刻を取得して、そこから差を求める方が正確なのですが、とりあえずここではsetInterval()を用いて作ってみたいと思います。

カウントダウンタイマーのスクリプト

では、HTMLのBODY内に、以下のフォームを記入して下さい。

<form name="timer">
<input type="text" value="">分
<input type="text" value="">秒<br>
<input type="button" value="スタート" onclick="Start()">
<input type="button" value="ストップ" onclick="Stop()">
</form>

さらにHTMLのヘッダーに、以下のスクリプトを記入します。

<script type="text/javascript">
<!--

var Timer1; //タイマーを格納する変数（タイマーID）の宣言


//カウントダウン関数を1000ミリ秒毎に呼び出す関数
function Start()
{
  document.timer.elements[2].disabled=true;
  Timer1=setInterval("CountDown()",1000);
}

//タイマー停止関数
function Stop()
{
  document.timer.elements[2].disabled=false;
  clearInterval(Timer1);
}

//カウントダウン関数
function CountDown()
{
  var min=document.timer.elements[0].value;
  var sec=document.timer.elements[1].value;
  
  if( (min=="") && (sec=="") )
  {
    alert("時刻を設定してください！");
    ReSet();
  }
  else
  {
    if (min=="") min=0;
    min=parseInt(min);
    
    if (sec=="") sec=0;
    sec=parseInt(sec);
    
    TMWrite(min*60+sec-1);
  }
}

//残り時間を書き出す関数
function TMWrite(int)
{
  int=parseInt(int);
  
  if (int<=0)
  {
    ReSet();
    alert("時間です！");
  }
  else
  {
    //残り分数はintを60で割って切り捨てる
    document.timer.elements[0].value=Math.floor(int/60);
    //残り秒数はintを60で割った余り
    document.timer.elements[1].value=int % 60;
  }
}

//フォームを初期状態に戻す（リセット）関数
function ReSet()
{
  document.timer.elements[0].value="0";
  document.timer.elements[1].value="0";
  document.timer.elements[2].disabled=false;
  clearInterval(Timer1);
}  
  
// -->
</script>

＜サンプル＞

スクリプトの解説

フォーム部分

最初はHTMLのフォーム部分です。フォーム名は「timer」にしました。以下のパーツを設置しています。

elements[0]　テキストボックス　分数を入力
elements[1]　テキストボックス　秒数を入力
elements[2]　スタートボタン　関数Start()を呼び出す
elements[3]　ストップボタン　関数Stop()を呼び出す

JavaScriptの最初の部分

続いてJavaScript部分を見ていきましょう。最初に変数Timer1を宣言しています。関数の外で宣言しているので、これはグローバル変数（複数の関数で使用可）です。このTimer1にタイマーを格納して、ON/OFFできるようにします。

関数Start()

関数Start()で最初にスタートボタンを禁止状態にしています。その後、カウントダウン関数CounDown()をsetInterval()で1000ミリ秒、つまり1秒毎に呼び出します。このタイマーを変数Timer1に格納します。

関数Stop()

タイマー停止関数Stop()では、スタートボタンの禁止状態を解除し、 clearInterval()でタイマーを解除します。しかしフォームのテキストボックスは弄らないので、再びスタートボタンを押すと続きからカウントされます。どちらかと言うと一時停止ボタンに近いです。

関数CountDown()

関数CountDown()の最初で変数min,secを宣言し、テキストボックスの分数と秒数の値を代入します。

そしてif文を用いて、テキストボックスに何も記入されていないか確認します。 &&というのは「and」の意味です（２つの条件のどちらにも該当する）。テキストボックスが両方とも空の場合は、alert()を使って時刻を設定してもらうよう警告します。そして関数ReSet()を呼び出し、スタートボタンを元に戻してタイマーを解除します。

テキストボックスのどちらかに記入されているなら、parseInt()を使って数値に変換していきます。どちらかが空の場合、0にしておきます。

そして残り時間を書き出す関数TMWrite()を呼び出します。その際引数に残り秒数－１を指定します（分数は×60で秒数になります）。ここで1秒減らすことによって、カウントダウンされるわけです。

関数TMWrite()

カウントダウン関数が長くなるので、残り時間を書き出す部分を別の関数にしました。最初に引数をparseInt()で数値に変換しています。この引数は「残り秒数－1」が指定されていました。

続いてこの引数が0以下か、if文で調べます。条件は「int==0」でも良いようですが、最初から0秒やマイナスの数値を記入された場合のことも想定して、0以下にします。

intが0以下であれば、関数ReSet()を呼び出してフォームを初期状態に戻し、タイマーを停止します。そしてalert()を用いて「時間です！」と表示します。

intがまだ0に達していない場合は、残り秒数をテキストボックスに表示します。分数は残り秒数を60で割って切り捨てをした値、秒数は残り秒数を60で割った余りです。余りを求めるのは「%」を使います。

関数ReSet()

フォームを初期状態に戻す処理は、このスクリプトで2回出てきます。ですから一々その場に書くより、関数にして呼び出せばスッキリします。フォーム初期化として、以下の処理を行っています。

分数のテキストボックスに「0」を表示する。
秒数のテキストボックスに「0」を表示する。
スタートボタンの禁止状態を解除する。
タイマーを解除する

ページトップへ

前へ　 INDEXへ

JavaScriptでカウントダウンタイマーを作る方法について解説