Posts in 'web_page'

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

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

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

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

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

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

変更したい点

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

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

--> これ

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

以下作成記録です.

ストップウォッチ

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

Date

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

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

Start = new Date();

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

これは1970 …