javascriptでtimerをつくりたい(1)

研究室の研究会では発表時間が設定されており,先代の方が作成したタイマーで時間を測っている. htmlページでjavascriptを用いて,時間を計測するシステムである.

アラートを鳴らす時間を設定できるので5分ごと,30分後,みたいに細かい設定ができる.

また,ゆっくりボイスで"x分経過しました"と音声が再生されるので時間を意識しやすいしくみになっている.

しかし,タイムキーパーをやりながらちょこちょこ不満点が出てきた.

そして変更したい欲が出てきた.

変更したい点

レスポンシブルにしたい
- 画面サイズを変更しても時間が見えるほうが嬉しい
iPadでも音声が再生されるようにしたい
- PC上で実行しているが,持て余してるiPadをタイマー代わりにしたい(iOSではデータ制限のためか,音声が再生されない)
5分ごと鳴らすのは確定しているので設定を固定にしてしまいたい

ということで,とりあえず今までのタイマーを参考にしつつ,レスポンシブルに変更したタイマーを作成してみた.

ちょうどjavascriptでなにか作ってみたい,という気持ちがあったのでイチからつくってみた.

以下作成記録です.

元ページのソースコードをみるとここのサイトのストップウォッチを参考にしていた. このコードではDateとsetIntervalを使って時間を計測している.

時間を扱うオブジェクト.

引数を与えない場合,現在時刻を取得する.

Start = new Date();

経過時間を計算したい場合はgetTime()を用いる.

これは1970/1/1からの経過時間(ミリ秒)を求めるので時間StartからStopまでの経過時間Tは以下のように計算できる.

T = Stop.getTime() - Start.getTime();

一定時間ごとに関数を呼び出す. 引数の関数名はクオーテーションで囲む必要がある.

myInterval=setInterval("myWatch(1)",1);

clearInterval()で解除するまで実行し続ける.

上のコードだと停止させて再び実行させるとリセットされてしまう.

そこでタイマーを実行する時,すでにタイマーが動作しているかどうかのフラグaction_flugと今まで実行していた時間を記録しておくpause_timeを新しく実装した.

action_flugが立っていればストップするときにスタートから現時刻までの時間をpause_timeに記録しておき,もう一度スタートする時は開始時間からpause_timeを引くようにする.

これにより一時停止が可能になった.

また,一時停止を実装することでリセット機能が新たに必要になったのでresetTimer()追加した.これはclearInterval()を実行する関数である.

時間がずれる原因となるのでなるべく軽いフレームワークがいい.

軽いcssにしたいと思った結果spectreを一旦採用してみた.

実行はうまくいってる感じ.配色はのちのち考えようと思う.

Go Top

shihono