calendar

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< August 2018 >>

categories

archives

profile

商品の紹介について

このブログではアフェリエイトを利用して管理人おすすめの紹介をしておりますが、実際の取引はお客様とリンク先商品提供者との間で行われ、当ブログ並びに管理人は一切の責任を負いかねますのでご了承ください。お取引に関して生じる問い合わせは、お取引先までご連絡ください。

JavaScript・2つのタイマー(その1)

0
      画面上にさりげなく置かれた時計、時間が来たら処理を始めるアラーム、これらのタイマーを作りま〜す。
    js42私が主役

     タイマーを作るには、windowオブジェクトsetIntervalメソッドsetTimoutメソッドを使い、これら自体はそんなに難しいものではありません。
     まずこの2つのメソッドを理解しましょう。両方に共通する基本的な機能は、ある時間で、決められた関数を呼び出し実行する事です。

    setIntervalメソッド
      
    ♣ 一定間隔毎に、指定した関数を呼び出す。
       書き方  window.setInterval(関数,呼び出し間隔)
       タイマーを停止したい場合は、clearIntervalメソッドを使う。
    setTimeoutメソッド
      
    ♣ 一定時間後に、指定した関数を呼び出す。
       書き方  window.setTimeout(関数,呼び出までの時間)
       タイマーを停止したい場合は、clearTimeoutメソッドを使う。
    ちなみに、呼び出し間隔、呼び出しまでの時間の単位は1/1000秒です。

     今回は、setIntervalメソッドを使ってデジタル時計を作ってみますが、ロジックを判り安くする為に3段階に分けてプログラムします。

    ステップ1 画面が立ちあがった時に「現在時刻」を表示
     
    body中のIDが「xx」の文列を、現在の時、分、秒に書き換える関数を作ります。関数の名前は「startWatch」と付け、画面立ち上がりと同時に起動する様にしました。
    js38サンプル
    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

    ステップ2 表示される「現在時刻」の時、分、秒全てを2ケタで表示
     
    関数の名前は「startWatch」の中で、現在の時、分、秒が「10」以下の時には頭に「0」を付けて、いかなる場合も2ケタ表示されるようにします。条件式は「if分岐」を使いました。
    js39サンプル
    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

    ステップ3 1秒毎に「現在時刻」が更新される様に表示・・・完成
     
    ここでsetIntervalメソッドが登場します。関数が1秒毎に呼び出される様にします。window.setInterval(startWatch,1000);」の1行の追加です。
    js40サンプル
    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
    画面上での見映えを良くするにはスタイルを指定すれば良いのですが、ここでは割愛します。

     今回はsetIntervalメソッドで時計を作って見ました。

     setIntervalメソッドを使えば、画面上の写真を一定間隔で自動的に差し替えできます。次回は、この写真自動差し替えをやってみたいと思います。

    なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。


    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック