今回はタイマーの部分を作成していきます。
javascriptでカウントダウンタイマーを作成
どうすれば完成版のような10秒のカウントダウンの動き
がつくれるか考えてみましょう。
できましたね？
1つの例として次のような処理が考えられます。
- 現在の時間に10秒加えた時間を変数に保持。
- 1の時間と現在の時間を比べる
- 1と2の差を画面に表示
- 2と3の処理を1の時間と2の時間が同じになるまで繰り返す。
イメージできましたか？
具体的な数字でもう1度解説します。
- プログラムを9時丁度に実行したとして10秒後の9時10秒を覚えます
- 現在の時間が9時1秒です。変数の時間と9秒です。
- 違いの9秒を画面に表示します。
- 2と3の処理を繰り返します.
- 現在の時間が9時2秒です。変数の時間は9時10秒です。
- 違い8秒を画面に表示します。
このようにカウントダウンの処理が行われていきます。
これを実装していく中で必要な2つの概念があります。
- javascriptで時間を扱う方法
- 定期的に処理を実行する方法
この２つをしっかり覚えていきましょう。
javaScriptの時間の扱い方
早速ですがjavascriptで時間の扱い方を学んでいきましょう。
まずは現在時刻の表示から。
chromeのコンソールに次のプログラムを打ち込んでみましょう。
|
1 |
new Date() |
結果は次のようになります。
|
1 |
Wed Dec 06 2017 14:59:22 GMT+0900 (JST) |
日付が表示されます。
簡単ですが、今回の国名当てゲームの場合ちょっと不都合があります。
制限時間が10秒なので10秒後の時間が欲しいのです。
そして、現時点からどれだけ時間が離れているか計算する必要があります。
ですが、上のように時、分、秒で時間が表されていると計算がしにくいので
getTime()というメソッドを利用します。
まずは次のプログラムをコンソールに入力して実行してください
|
1 2 |
now = new Date(); now.getTime(); |
結果
|
1 |
1512541032922 |
この数字は何を表しているのか。
これは、「1970年 1月1日午前 00:00:00」からgetTime()をした日までの
時間をミリ秒で表したものです。
※ミリ秒というのは1000分の1秒を表します。
つまり
1000ミリ秒 = 1秒
10000ミリ秒 = 10秒
です。
単位がミリ秒で統一されていれば、開始時刻からどれくらい時間が
経過したか計算しやすくなりますね。
参考としてよくある10秒タイマーをクロームに描いてみましょう。
スタートの時間を記録する。
|
1 2 |
var tmp = new Date(); var startTime = tmp.getTime(); |
10秒経過したと思ったら次のプログラムを実行してください。
|
1 2 3 4 5 |
var tmp = new Date(); var endTime = tmp.getTime(); var result = (endTime - startTime )/1000; alert(result); |
経過時間がアラートで表示されましたね。
javascriptを用いだ時間の扱い方は理解できましたか？
