トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

JavaScript/タイマー

Last-modified: 2015-10-28 (水) 15:58:48 (665d)
Top / JavaScript / タイマー

JavaScript


タイマーアプリが欲しい

最近、全然時間管理ができません(^^;)
自分は時間割みたいに、「この時間はこれをやりなさい」みたいなのが向いているのかもしれないなーと。

そこでタイマーアプリが欲しい。
集中したい時間入れて、その時間はそれ(仕事でも趣味でも何でも)に集中する!

また機能は単純でも良いけど、どこでも使えるようなやつ。
そうなるとネイティブでなく、ブラウザで動くようなのが良いですよね。
JavaScript + HTML5 なんてイマドキかもしれない。

ちょっとググれば幾らでも良いのが出てくるんでしょうけど、
今回は勉強も兼ねて自分で作ってみます。

HTML5 ってこんなシンプルなのか

Google が HTML5 と CSS のスタイルガイドを出しているのですが、
そこに見覚えのある書式が Not Recommended になってました(^^;)

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>


昔はどこのサイトもこれでしたよね・・・というかこれでないと表示できなかったのですけど。

Recommended なスタイルはこんな感じ。

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.


!?
body も head もありませんね・・・。
世の中便利になりましたね(?)
ありがたくわたくしもこのスタイルでいくことにします笑

JavaScript 基本

JavaScript、実は触ったことあるんですよ。
10年以上前で、かつバイト先で人のコードをちょこちょこ触った程度なので
ホントに「触った程度」ですけどね・・・。

ルール1 script 要素の中にコードを書く

<script>
// code
</script>

ルール2 型指定言語ではない

これはちょっと自分にはツライな・・・。

変数の宣言は

var hoge;


関数の定義は

function fuga(arg)
{
  // code
}


とする。

タイマー Version 0.01

ここまで分かればなんとなく書けそうなのでレッツトライ。
それっぽいのができたので晒してみます。
JavaScripter? な方々からすれば噴飯モノのコードかもしれませんがお許し下さい(^^;)

  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <script>
  4.   var State = {
  5.     IDLE : 0,
  6.     PLAY : 1,
  7.     PAUSE : 2
  8.   };
  9.   var state = State.IDLE;
  10.  
  11.   var sec;
  12.   var timer;
  13.  
  14.   function showRestTime(text)
  15.   {
  16.     var rest = document.getElementById("rest");
  17.     rest.innerHTML = text;
  18.   }
  19.  
  20.   function timeout()
  21.   {
  22.     alert("time-out!");
  23.   }
  24.  
  25.   function checkTimer()
  26.   {
  27.     console.log("sec=" + sec);
  28.  
  29.     sec--;
  30.     showRestTime("残り " + sec + " 秒");
  31.  
  32.     if (sec <= 0)
  33.     {
  34.       clearInterval(timer);
  35.       timeout();
  36.       showRestTime("");
  37.  
  38.       state = State.IDLE;
  39.     }
  40.   }
  41.  
  42.   function startTimer()
  43.   {
  44.     switch (state)
  45.     {
  46.       case State.IDLE:
  47.       {
  48.         var input = document.getElementById("input");
  49.         sec = eval(input.value);
  50.         showRestTime("残り " + sec + " 秒");
  51.         timer = setInterval('checkTimer()', 1000);
  52.  
  53.         state = State.PLAY;
  54.       } break;
  55.  
  56.       case State.PLAY:
  57.         return;
  58.  
  59.       case State.PAUSE:
  60.       {
  61.         timer = setInterval('checkTimer()', 1000);
  62.  
  63.         state = State.PLAY;
  64.       } break;
  65.     }
  66.   }
  67.  
  68.   function pauseTimer()
  69.   {
  70.     if (state == State.PLAY)
  71.     {
  72.       clearInterval(timer);
  73.  
  74.       state = State.PAUSE;
  75.     }
  76.   }
  77.  
  78.   function stopTimer()
  79.   {
  80.     if (state != State.IDLE)
  81.     {
  82.       clearInterval(timer);
  83.       showRestTime("");
  84.  
  85.       state = State.IDLE;
  86.     }
  87.   }
  88. </script>
  89. <title>タイマー</title>
  90. タイマー : Ver 0.01
  91. <p id="rest"></p>
  92. <input type="text" id="input" size="4" value="3600"><br>
  93. <button onclick="startTimer();">Start</button>
  94. <button onclick="pauseTimer();">Pause</button>
  95. <button onclick="stopTimer();">Stop</button>


ここ(timer0.01.html)で上記のコードを動かせたりするので、奇特な方はどうぞ。

  • 初期値は 3600 秒(1時間)
  • Start を押すとタイマーが起動。
  • Pause を押すと一時停止、この時 Start を押すと再開
  • Stop を押すと停止。
timer0.01.png

自分のためのメモ

実装のためにいろいろ調べたところを今後調べずに済むように(笑)、
説明のようなメモを残してオキマス。
間違いが多いと思われますのでご注意下さいませ。
・・・親切な方はご指摘下さいませ(^^;)

  • l.2 文書のメタデータを定義する。ここでは文書のエンコードを "UTF-8" で行っていることを定義している。
  • l.4-8 enum の定義。C 言語の struct bit field みたいでちょっと戸惑う。
  • l.16 document オブジェクトはこの文書のオブジェクトを示すようで、getElementById? メソッドで指定した id のエレメントを取得できる。それによって l.91 にある p 要素を取得している。
  • l.17 l.16 で取得した p 要素の innerHTML プロパティに引数 text を与えて書き換えている。
  • l.20-23 タイムアウト関数。時間が経ったら、呼び出される関数。alert 関数でその旨を知らせる。
  • l.25-40 タイマ関数。周期的に起動し、残り時間をチェックする。
  • l.27 console.log 関数で sec の値をコンソールに表示している。
  • l.42-65 タイマを起動する関数。Play を押すと起動。
  • l.49 eval 関数により input.value という文字列を Javascript のコードとして評価。
  • l.51 setInterval 関数によりタイマーのインターバル(ミリ秒指定)とタイマ関数を指定。
  • l.72,82 clearInterval 関数によりタイマをクリアする
  • l.93-95 button タグの onlick 要素に関数名を指定することで、ボタンを押されたとき呼び出される関数を設定できる。

感想

手っ取り早く「それっぽいもの」が作れるような気はするものの、
変数が var のみで気持ち悪い。
型を固定したいなー。できるんだろうか??


1st : 2015/10/28


添付ファイル: filetimer0.01.png 846件 [詳細] filetimer0.01.html 479件 [詳細]