JavaScript 4

1. タイマーイベント
• setInterval, clearInterval
• setTimeout
2. 課題4

タイマーイベント

タイマーイベントはアニメーションでも利用される．

setInterval, clearInterval

例4-1  カウントアップ

上のファイルを実行して表示されるページ

• setInterval("counter()", 1000)
  1000ミリ秒の間隔で関数 counter() をくり返し処理する
• clerInterval(myTimer)
  くり返し処理を停止(キャンセル)する

      function counter() {
         document.Form.display.value++
      }

フォーム(Form)内の display の値いを1つ増す

      function start() {
         document.Form.display.value = 0;
         myTimer = setInterval("counter()", 1000);
      }

フォーム(Form)内の display の値いを0にセットする
タイマー(myTimer)に関数 counter() を登録し， 1000ミリ秒ごとに counter() を呼び出すようにセットする

      <form name="Form">
         <input type="text" name="display" value="0">
         <input type="button" value="カウントを開始" onclick="start()">
         <input type="button" value="カウントを停止" onclick="stop()">
      </form>

Formという名前でフォームを定義する
display という名前のテキストフィールドを定義し，その値いを0似セットする
「カウントを開始」ボタンを定義し， クリック時のイベントハンドラとして start()を登録する
「カウントを停止」ボタンを定義し， クリック時のイベントハンドラとして stop()を登録する

setInterval と clearInterval

      タイマ変数 = setInterval(処理, 時間)
      clearInterval(タイマ変数)

---

setTimeoutを利用したアニメーション

上のファイルを実行して表示されるページ

      setTimeout("bar()", 200);

200ミリ秒待って，関数 bar() を呼び出す

      function bar() {
         document.BAR.src = img[n].src;
         n = (n+1)%4;
        setTimeout("bar()", 200);
      }

関数bar()内で200ミリ秒待って，自分自身を呼び出すことで， bar()がくり返し処理される

演習問題4

• ex4-1.html
  タイマーを使用して現在の日時を表示する下図のようなディジタル時計を作成せよ．
  ただし，日時の更新間隔は 1000ミリ秒とせよ． 表示形式は図と異なっていても構わない．
  

• ex4-2.html
  ラジオボタンにより， 「本日の日付」と「現在の時刻」を選択して表示するディジタル時計を作成せよ．
  ただし，日時の更新間隔は 1000ミリ秒とせよ．