var stopwatch = function(){
  var wrap = $('#stopwatch');
  var time = wrap.find('.stopwatch-time');
  var time2 = wrap.find('.stopwatch-time2');
  var log = wrap.find('.stopwatch-log');
  var btnPlay = wrap.find('.play');
  var btnStop = wrap.find('.stop').hide();
  var btnLap = wrap.find('.lap').hide();
  var btnClear =  wrap.find('.clear');

  var gmt;
  var hour,min,sec,milliSec;
  var startTime,nowTime,addTime,splitTime;

  var timer;
  var i = 0;
  var lapCount = 0;

  var logText = '';
  var isClear = true;
  var isPlay = true;

  //初期化
  milliSec = sec100 = sec = min = hour = 0;
  gmt = new Date().getTimezoneOffset() / 60 || 0;//時差


  btnPlay.on('click', function(){
    start();
  });
  btnStop.on('click', function(){
    stop();
  });

  btnClear.on('click', function(){
    clear();
  });
  btnLap.on('click', function(){
    lap();
  });
  $(document).on('keydown', function(e){
    if(e.which === 32){
      //space
      if(isPlay){
        start();
      } else {
        stop();
      }
      return false;
    } else if(e.which === 13){
      if(isPlay){
        clear();
      } else {
        lap();
      }
      return false;
    }
  });

  var start = function(){
    if(isClear){
      myStart = new Date();
    }
    isClear = false;

    startTime = new Date().getTime();
    addTime = (hour*60*60*1000 + min*60*1000 + sec * 1000 + milliSec);
    startTime -= addTime;

    timer = setInterval(function(){count();}, 1);
    isPlay = false;
    btnPlay.hide();
    btnStop.show();
    btnClear.hide();
    btnLap.show();
  }
  var stop = function(){
    clearInterval( timer );
    isPlay = true;
    btnPlay.show();
    btnStop.hide();
    btnClear.show();
    btnLap.hide();
    addLap();
  }

  var lap = function(){
    addLap();
  }

  var clear = function(){
    i=0;
    lapCount=0;
    addTime = 0;
    milliSec = sec100 = sec = min = hour = 0;
    isClear = true;
    startTime = new Date();
    count();
    clearInterval( timer );
    logText = '';
    log.text(logText);
  }

  var addLap = function(){
    lapCount++;
    var viewLapCount = ('0000' + lapCount).slice(-4);
    logText = viewLapCount + '.  ' + time.text() + '\n' + logText;
    log.text(logText);
    console.log(time.text());
  }

  //時刻
  var count = function(){
    nowTime = new Date().getTime();
    diff = new Date(nowTime - startTime);
    hour     = diff.getHours() + gmt;
    min      = diff.getMinutes();
    sec      = diff.getSeconds();
    milliSec = diff.getMilliseconds();

    //桁あわせ
    var HH = ('00'  + hour    ).slice(-2);
    var mm = ('00'  + min     ).slice(-2);
    var SS = ('00'  + sec     ).slice(-2);
    var MS = ('000' + milliSec).slice(-2);
    var HHmmSSMS = HH+":"+mm+":"+SS+"."+MS;

    time.text(HHmmSSMS);
  }



  //旧ver
  var count3 = function(){
    myStop=new Date();	// 経過時間を退避
    myTime = myStop.getTime() - myStart.getTime();
    myH = Math.floor(myTime/(60*60*1000));
    myTime = myTime-(myH*60*60*1000);	
    myM = Math.floor(myTime/(60*1000));
    myTime = myTime-(myM*60*1000);	
    myS = Math.floor(myTime/1000);
    myMS = myTime%1000;	
    //桁あわせ
    myH = ('00' + myH).slice(-2);
    myM = ('00' + myM).slice(-2);
    myS = ('00' + myS).slice(-2);
    myMS = ('000' + myMS).slice(-2);
    myTime = myH+":"+myM+":"+myS+"."+myMS;

    time.text(myTime);
  }

  //超ずれる
  var count2 = function(){
    i++;
    var MS = i % 1000;
    var SS = Math.floor(i/100);
    var MM = Math.floor(SS/60);
    var HH = Math.floor(MM/60);
    
    //桁あわせ
    HH = ('00' + HH).slice(-2);
    MM = ('00' + MM).slice(-2);
    SS = ('00' + SS).slice(-2);
    MS = ('000' + MS).slice(-2);
    myTime = HH+":"+MM+":"+SS+":"+MS;

    time2.text(myTime);
  }

}

stopwatch();

/*--------------------------------
#stopwatch
--------------------------------*/

#stopwatchView{
  width:100%;
  height:100vh;
  margin:0 auto;
  text-align:center;
  user-select:none;
}


#stopwatchView  *{
  box-sizing:border-box;
}
#stopwatch p{
  font-size:12vw;
  font-weight:bold;
  user-select:text;
}
#stopwatch .stopwatch-log{
  width:100%;
  height:160px;
  margin:0 auto;
  font-size:4vw;
  opacity:.6;
  white-space:pre-wrap;
  overflow-y:scroll;
  user-select:text;
}
#stopwatch .buttons{
  display:flex;
  justify-content:center;
  align-items:center;
}

#stopwatch a{
  display:flex;
  justify-content: center;
  align-items: center;
  width:40vmin;
  height:40vmin;
  margin:2vmin;
  vertical-align:middle;
  text-align:center;
  font-size:80px;
  background-color:#aaa;
  cursor:pointer;
}

#stopwatch a img{
  width:80%;
  height:80%;
}


#stopwatch a:hover{
  background-color:#ccc;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-date-stopwatch/