--:--:--.--

--:--:--.--
view source

JavaScript

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();

CSS

/*--------------------------------
#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;
}

HTML

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

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

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。