Stop Watch!

An Applied Example with Date() Object

00h00m00s000
START STOP RESET

©2009 Nigoro. All rights reserved.

Source Code

<script type="text/javascript"><!--
var kijun, genzai, startbuttonchecker = 0, stopbuttonchecker = 0,
    hold = new Date(), stopwatchid;

function timing(){
 var timedifference, tmp,
     diffhour, diffmin, diffsec, diffmillisec;

 genzai = new Date();

 timedifference = genzai.getTime() - kijun.getTime();
//assigns "timedifference" to the time difference
//between "genzai" and "kijun" by the millisecond.

 tmp = timedifference / (60 * 60 * 1000);
 if(tmp >= 24){
  kijun = new Date();
  genzai = new Date();
  timedifference = genzai.getTime() - kijun.getTime();
  tmp = timedifference / (60 * 60 * 1000);
 }
//resets "kijun" to a new criterion
//when the timing period is beyond 24 hours.

 diffhour = Math.floor(tmp);
//(represents []:Gauss' symbol)
//means the greatest integer
//that is less than or equal to "tmp".

//In this function "tmp" is reused.

 timedifference = timedifference - diffhour * 60 * 60 * 1000;
 tmp = timedifference / (60 * 1000);
 diffmin = Math.floor(tmp);

 timedifference = timedifference - diffmin * 60 * 1000;
 tmp = timedifference / 1000;
 diffsec = Math.floor(tmp);

 diffmillisec = timedifference - diffsec * 1000;

 return {diffhour:diffhour, diffmin:diffmin,
         diffsec:diffsec, diffmillisec:diffmillisec};
}

function starttiming(){
 clearInterval(stopwatchid);
 stopwatchid =
  setInterval(
   function(){
    var tmp = timing();
    displaytimingresult(
     tmp.diffhour, tmp.diffmin,
     tmp.diffsec, tmp.diffmillisec
    );
   }
  , 1);
}

function stoptiming(){
 if(stopbuttonchecker == 0) stopbuttonchecker = 2;

 if(stopbuttonchecker == 1){
  hold.setTime(genzai.getTime());
//sets "hold" by the millisecond
//to the got time by the millisecond of "genzai".

  clearInterval(stopwatchid);
  startbuttonchecker = 3;
  stopbuttonchecker = 2;
 }
}

function resettiming(){
 startbuttonchecker = 0;
 stopbuttonchecker = 0;
 clearInterval(stopwatchid);
 displaytimingresult(0, 0, 0, 0);
}

function nucleus(){
/* Copyright(C) 2009 にごろ Nigoro. All rights reserved. */
 if(startbuttonchecker == 0) startbuttonchecker = 1;

 if(startbuttonchecker == 1){
  kijun = new Date();
  starttiming();
  startbuttonchecker = 2;
  stopbuttonchecker = 1;
 }
 if(startbuttonchecker == 3){
  kijun.setTime( new Date().getTime()
   - ( hold.getTime() - kijun.getTime() ) );
  starttiming();
  startbuttonchecker = 2;
  stopbuttonchecker = 1;
 }
}

function displaytimingresult(e, f, g, h){
 var tmp ,e ,f, g, h;

 tmp = "0" + e + "0";
 e = tmp.slice(tmp.length-3, -1);

 tmp = "0" + f + "0";
 f = tmp.slice(tmp.length-3, -1);

 tmp = "0" + g + "0";
 g = tmp.slice(tmp.length-3, -1);

 tmp = "00" + h + "0";
 h = tmp.slice(tmp.length-4, -1);
//arranges each variable's places.

 document.getElementById("timingresult").innerHTML
  = e + "h" + f + "m" + g + "s" + h;
}
//--></script><center>
<span id="timingresult" style="line-height:120%; font-size:35px; font-family:Verdana, Tahoma">&nbsp;</span><br />
<span style="cursor:pointer; padding:1px 5px; background:#00F; color:#FFF" onclick="nucleus()">START</span>
<span style="cursor:pointer; padding:1px 5px; background:#F00; color:#FFF" onclick="stoptiming()">STOP</span>
<span style="cursor:pointer; padding:1px 5px; background:#0F0; color:#FFF" onclick="resettiming()">RESET</span>
<div style="text-align:center; padding:8px 0 0; font-size:8px; font-family:'ＭＳ　Ｐゴシック',Osaka">&copy;2009 Nigoro. All rights reserved.</div><script type="text/javascript"><!--
displaytimingresult(0, 0, 0, 0);
//--></script>
</center>

Blue colored parts are essential.

タグ：応用 Date() Dateオブジェクト 例 example ストップウォッチ stopwatch JavaScript Applied ジャバスクリプト