備忘録というか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>

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

実行

スタートを押す

ポーズを押す

リセットを押す

最後に

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

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

全体のコード

1.スタートボタン

2.ポーズボタン

3.リセットボタン

実行画面

最後に