jQueryを使って簡単なストップウォッチを作ってみた

備忘録というかjQueryの復習がてら書いていきたいと思います。
まだ初心者なので、気になる点がありましたら、ご指摘お願いします。

#全体のコード

```stopwatch.js
$(ducument).ready(function(){
 var sec = 0;
 var min = 0;
 var timer = 0;
 
 $("min").html(min);
 $("sec").html(sec);

 $("#begin").click(function(){ //スタートボタン
  var message1 = "開始！"
  $("#calc").html(message);
  $("#begin").hide();
  $("#stop").show();

  timer = setInterval(function(){
   $("#min").html(min);
   $("#sec").html(sec);
   sec++;
   if(sec == 60){
    sec = 0;
    min++;
   };
  },1000);
 });

 $("#stop").click(function(){  //ポーズボタン
  var message2 = "止めます";
  $("#calc").html(message2);
  clearInterval(timer);

  $("#stop").hide();
  $("#begin").show();
 });

 $("#end").click(function(){  //リセットボタン
  var message3 = "計りなおします";
  $("#calc").html(message3);
  clearInterval(timer);
  
  min = 0;
  sec = 0;
  $("#min").html(min);
  $("#sec").html(sec);
 });
});
```

```stopwatch.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ストップウォッチ</title>
 </head>

 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 <script type="text/javascript" src="stopwatch.js">
 
 <body>
  <center>
  <h1>ストップウォッチ</h1>
  <span id="min" style="font-size:80px;"></span>
  <span>:</span>
  <span id="sec" style="font-size:80px;"></span>
  </center> 

  <p>
   <button id="begin">start</button>
   <button id="stop" style="display:none">pose</button>
   <button id="end">reset</button>
  </p>

  <p id="calc">
   時間を計ります。
  </p>
 </body>
</html>

```

JavaScriptファイルを主に見ていきます。

```stopwatch.js
 var sec = 0;
 var min = 0;
 var timer = 0;
 
 $("min").html(min);
 $("sec").html(sec);
```
secは秒、minは分、timerは後で出てくるsetInterval関数で使うための変数。

残り二つは、htmlファイル

```stopwatch.html
  <span id="min" style="font-size:80px;"></span>
  <span>:</span>
  <span id="sec" style="font-size:80px;"></span>
```
のid部分に表示をするという意味。

まずは各ボタンの実装。
##1.スタートボタン

```stopwatch.js
$("#begin").click(function(){
 var message1 = "開始！";
 $("#calc").html(message1);
 $("#begin").hide();
 $("#end").show();

 timer = setInterval(function(){
  $("#min").html(min);
  $("#sec").html(sec);
  sec++;
  if(sec == 60){
   sec = 0;
   min++;
  };
 },1000);
});
```
スタートボタンの関数に関して、スタートボタンを押したら上の関数が動きます。
分解してみていくと、

```
 var message1 = "開始！";
 $("#calc").html(message1);
 $("#begin").hide();
 $("#end").show();
```
ここでは、ボタンを押した瞬間に、htmlファイルのid=calcにあたる部分のテキスト

```stopwatch.html
  <p id="calc">
   時間を計ります。
  </p>
```
が「開始！」に変化します。
そして同時に、スタートボタンが隠れ、htmlファイルにある

```stopwatch.html
<button id="stop" style="display:none;">pose</button>
```
という隠れていた、ポーズボタンが現れるようになっています。

次に

```
 timer = setInterval(function(){
  $("#min").html(min);
  $("#sec").html(sec);
  sec++;
  if(sec == 60){
   sec = 0;
   min++;
  };
 },1000);
```
ここでは、実際に数を数える作業をやっています。
二行目三行目は数の表示。sec++で１秒ずつ増やしていっています。
if文では、60秒経過したら、secを0にして、minに1を代入するようにしています。
これsetIntervalに入れることで、一定間隔で処理を行えます(ここでは１秒ごとに動かしている)。

##2.ポーズボタン

```stopwatch.js
$("#stop").click(function(){
 var message2 = "停止します";
 $("calc").html(message2);
 clearInterval(timer);

 $("#stop").hide();
 $("#begin").show();
```
スタートボタンと流れはほとんど同じです。

```
clearInterval(timer);
```
これは、ポーズボタンを押すとストップウォッチが止まるようになっています。timerは上のカウントを表しています。

##3.リセットボタン

```stopwatch.js
$("#end").click(function(){
 var message3 = "計りなおします";
 $("#calc").html(message3);
 clearInterval(timer);

 sec = 0;
 min = 0;
 $("#min").html(min);
 $("#sec").html(sec);
});
```
　リセットボタンもほとんど変わらないです。
clearInterval(timer)でカウントを止めて、リセットするので、secとminにそれぞれ0を代入しています。

#実行画面

このままだと各ボタンが小さいので、サイズ変更します。

```stopwatch.html
    <p>
      <button id="begin" style="width:20; height:10; font-size:15px;">Start</button>
      <button id="continue" style="width:20; height:10; font-size:15px; display: none">Pose</button>
      <button id="end" style="width:20; height:10; font-size:15px;">Reset</button>
    </p>

```
こんな感じに大きさ調整。

*実行*
![スクリーンショット 2016-10-24 12.44.38.png](https://qiita-image-store.s3.amazonaws.com/0/145671/9f33db60-5028-0328-aae1-a408882f70e5.png)

*スタートを押す*
![スクリーンショット 2016-10-24 12.44.53.png](https://qiita-image-store.s3.amazonaws.com/0/145671/8c177cdf-f775-05ba-df6d-285c3914818a.png)

*ポーズを押す*
![スクリーンショット 2016-10-24 12.45.04.png](https://qiita-image-store.s3.amazonaws.com/0/145671/99143c0f-517a-c1af-dc42-5d1b52f74e93.png)

*リセットを押す*
![スクリーンショット 2016-10-24 12.44.20.png](https://qiita-image-store.s3.amazonaws.com/0/145671/e1b06959-bf95-4907-506b-27add0763a8d.png)


#最後に
まだまだ改善点があって、このままだと処理がすすんでsecが永遠に増えていくことになっていって、ストップウォッチの役割がなくなってしまうってことです。
また機能を追加していきたいと思います。
とりあえずうまい具合に完成した(?)と思ったので、これで区切りたいと思います。
setIntervalが始めの１秒目をちゃんと数えないので、そこだけが腑に落ちないですが・・・。