カウントダウンタイマーJavaScript入門

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

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

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

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

<script>

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


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

//タイマー停止関数
function cntStop()
{
  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」にしました。 以下のパーツを設置しています。

JavaScriptの最初の部分

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

関数cntStart()

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

関数cntStop()

タイマー停止関数cntStop()では、スタートボタンの禁止状態を解除し、 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回出てきます。 ですから一々その場に書くより、関数にして呼び出せばスッキリします。 フォーム初期化として、以下の処理を行っています。