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

JavaScript/タイマー

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

JavaScript


タイマーアプリが欲しい

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

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

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

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

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

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

#geshi(html5){{

!-- Not recommended -->

!DOCTYPE html>

html>

 <head>
   <title>Spending money, spending bytes</title>
 </head>
 <body>
   <p>Sic.</p>
 </body>

/html>
}}

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

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

#geshi(html5){{

!-- Recommended -->

!DOCTYPE html>

title>Saving money, saving bytes</title>

p>Qed.
}}

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

JavaScript 基本

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

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

#geshi(JavaScript){{

script>

/script>
}}

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

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

変数の宣言は

#geshi(JavaScript){{
var hoge;
}}


関数の定義は

#geshi(JavaScript){{
function fuga(arg)
{

 // code

}
}}

とする。

タイマー Version 0.01

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

#geshi(JavaScript,number){{

!DOCTYPE html>

meta charset="UTF-8">

script>

 var State = {
   IDLE : 0,
   PLAY : 1,
   PAUSE : 2
 };
 var state = State.IDLE;
 var sec;
 var timer;
 function showRestTime(text)
 {
   var rest = document.getElementById("rest");
   rest.innerHTML = text;
 }
 function timeout()
 {
   alert("time-out!");
 }
 function checkTimer()
 {
   console.log("sec=" + sec);
   
   sec--;
   showRestTime("残り " + sec + " 秒");
   if (sec <= 0)
   {
     clearInterval(timer);
     timeout();
     showRestTime("");
     state = State.IDLE;
   }
 }
 function startTimer()
 {
   switch (state)
   {
     case State.IDLE:
     {
       var input = document.getElementById("input");
       sec = eval(input.value);
       showRestTime("残り " + sec + " 秒");
       timer = setInterval('checkTimer()', 1000);
       state = State.PLAY;
     } break;
     case State.PLAY:
       return;
     case State.PAUSE:
     {
       timer = setInterval('checkTimer()', 1000);
       state = State.PLAY;
     } break;
   }
 }
 function pauseTimer()
 {
   if (state == State.PLAY)
   {
     clearInterval(timer);
     state = State.PAUSE;
   }
 }
 function stopTimer()
 {
   if (state != State.IDLE)
   {
     clearInterval(timer);
     showRestTime("");
     state = State.IDLE;
   }
 }

/script>

title>タイマー</title>
タイマー : Ver 0.01

p id="rest"></p>

input type="text" id="input" size="4" value="3600">秒<br>

button onclick="startTimer();">Start</button>

button onclick="pauseTimer();">Pause</button>

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 1579件 [詳細] filetimer0.01.html 848件 [詳細]