Improved? UnImproved? STOPWATCH

 

©2009 Nigoro. All rights reserved.

一応…
必要ないとは思いますが…
いらないとは思いますが…
177px幅までのサイドペインに…
ご自由に貼っていただけますが…
そのあたりで微妙にレイアウト崩れが…
出始めるかも知れません…
そのときはスタイルシートをいじってください…

今回はデザイン、機能を重視してますので…
といってもたいしたことはありませんが…
早押しには不向きのようです…
IE6、Firefox、Chrome、Opera、Win版Safariで…
試しましたが、IEだけ反応も表示も遅いですね…



　早押しででました…
　ちなみに、火狐です…



　またまたたまたまでました…
　ちなみに、USBマウスです…
　montblancさんにはおよびません…



ソース

<style type="text/css"><!--
div.nigorosw1{text-align:center;}
div.nigorosw2{display:-moz-inline-box; display:inline-block; /display:inline; /zoom:1;}
#nigoroswtimingresult{line-height:28px; font-size:24px; font-family:Arial,monospace,Terminal,'ＭＳ ゴシック','Osaka－等幅','Osaka-Mono';}
#nigoroswreset{line-height:14px; vertical-align:middle; width:85px; padding:0 0 1px; float:left; text-align:center; font-size:12px; color:#FFF; font-family:Impact,Arial,'ＭＳ Ｐゴシック',Osaka;}
div.swspace{line-height:14px; width:4px; float:left;}
#nigoroswstart{cursor:pointer; line-height:14px; vertical-align:middle; width:85px; padding:0 0 1px; float:left; text-align:center; font-size:12px; color:#FFF; font-family:Impact,Arial,'ＭＳ Ｐゴシック',Osaka;}
#nigorocrsw{text-align:center; padding:3px 0 1px; font-size:8px; font-family:'ＭＳ Ｐゴシック',Osaka;}
--></style><script type="text/javascript"><!--
/* stopwatch by Nigoro. Ver.1.10 */
var swkijun, swgenzai, swhold = new Date(), swstopwatchid;
function swinitialize(){
 displaytimingresult(0, 0, 0, 0);
 document.getElementById("nigoroswstart").innerHTML = "START";
 document.getElementById("nigoroswstart").style.background = "#00F";
 document.getElementById("nigoroswreset").innerHTML = "&nbsp;";
 document.getElementById("nigoroswreset").style.background = "#FFF";
}

function swtiming(){
 var timediff, tmp, diffhour, diffmin, diffsec, diffmillisec;
 timediff = swgenzai.getTime() - swkijun.getTime();
 tmp = timediff / 3600000;
 if(tmp >= 24){
  swkijun = new Date();
  swgenzai = new Date();
  timediff = swgenzai.getTime() - swkijun.getTime();
  tmp = timediff / 3600000;
 }
 diffhour = Math.floor(tmp);
 timediff = timediff - diffhour * 3600000;
 tmp = timediff / 60000;
 diffmin = Math.floor(tmp);
 timediff = timediff - diffmin * 60000;
 tmp = timediff / 1000;
 diffsec = Math.floor(tmp);
 diffmillisec = timediff - diffsec * 1000;
 return {diffhour:diffhour, diffmin:diffmin, diffsec:diffsec, diffmillisec:diffmillisec};
}

function swstarttiming(){
 swkijun = new Date();
 clearTimeout(swstopwatchid);
 document.getElementById("nigoroswstart").innerHTML = "STOP";
 document.getElementById("nigoroswstart").style.background = "#F00";
 document.getElementById("nigoroswreset").innerHTML = "SPLIT";
 document.getElementById("nigoroswreset").style.background = "#0FF";
 document.getElementById("nigoroswreset").style.cursor = "pointer";
 swnucleus();
}

function swstoptiming(){
 document.getElementById("nigoroswstart").onclick
  = function(){
     swkijun.setTime(new Date().getTime() - (swhold.getTime() - swkijun.getTime()));
     document.getElementById("nigoroswstart").innerHTML = "STOP";
     document.getElementById("nigoroswstart").style.background = "#F00";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT";
     document.getElementById("nigoroswreset").style.background = "#0FF";
     swnucleus();
    };
 document.getElementById("nigoroswreset").onclick
  = function(){
     document.getElementById("nigoroswreset").style.cursor = "auto";
     swresettiming();
    };
}

function swsplittiming(){
 document.getElementById("nigoroswstart").onclick
  = function(){
     swhold.setTime(new Date().getTime());
     document.getElementById("nigoroswstart").innerHTML = "SPLIT START";
     document.getElementById("nigoroswstart").style.background = "#0FF";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT RESULT";
     document.getElementById("nigoroswreset").style.background = "#6495ED";
     swsplitresult();
    };
 document.getElementById("nigoroswreset").onclick
  = function(){
     document.getElementById("nigoroswstart").innerHTML = "STOP";
     document.getElementById("nigoroswstart").style.background = "#F00";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT";
     document.getElementById("nigoroswreset").style.background = "#0FF";
     swnucleus();
    };
}

function swsplitresult(){
 document.getElementById("nigoroswstart").onclick
  = function(){
     swkijun.setTime( new Date().getTime()- ( swhold.getTime() - swkijun.getTime() ) );
     document.getElementById("nigoroswstart").innerHTML = "SPLIT STOP";
     document.getElementById("nigoroswstart").style.background = "#F0F";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT CANCEL";
     document.getElementById("nigoroswreset").style.background = "#5F5";
     swsplittiming();
    };
 document.getElementById("nigoroswreset").onclick
  = function(){
     swgenzai.setTime(swhold.getTime());
     var tmp = swtiming();
     displaytimingresult(tmp.diffhour, tmp.diffmin, tmp.diffsec, tmp.diffmillisec);
     document.getElementById("nigoroswstart").innerHTML = "START";
     document.getElementById("nigoroswstart").style.background = "#00F";
     document.getElementById("nigoroswreset").innerHTML = "RESET";
     document.getElementById("nigoroswreset").style.background = "#0F0";
     swstoptiming();
    };
}

function swresettiming(){
 swinitialize();
 document.getElementById("nigoroswstart").onclick = function(){swstarttiming();};
}

function swnucleus(){
/* Copyright(C) 2009 Nigoro. All rights reserved. */
 swgenzai = new Date();
 var tmp = swtiming();
 displaytimingresult(tmp.diffhour, tmp.diffmin, tmp.diffsec, tmp.diffmillisec);
 document.getElementById("nigoroswstart").onclick
  = function(){
     swhold.setTime(swgenzai.getTime());
     clearTimeout(swstopwatchid);
     document.getElementById("nigoroswstart").innerHTML = "START";
     document.getElementById("nigoroswstart").style.background = "#00F";
     document.getElementById("nigoroswreset").innerHTML = "RESET";
     document.getElementById("nigoroswreset").style.background = "#0F0";
     swstoptiming();
    };
 document.getElementById("nigoroswreset").onclick
  = function(){
     clearTimeout(swstopwatchid);
     document.getElementById("nigoroswstart").innerHTML = "SPLIT STOP";
     document.getElementById("nigoroswstart").style.background = "#F0F";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT CANCEL";
     document.getElementById("nigoroswreset").style.background = "#5F5";
     swsplittiming();
    };
 swstopwatchid = setTimeout(function(){swnucleus();}, 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);
 document.getElementById("nigoroswtimingresult").innerHTML
  = e + "h" + f + "m" + g + "s" + h;
}
//--></script><div class="nigorosw1"><div class="nigorosw2">
<div id="nigoroswtimingresult"></div><div class="nigorosw1"><div class="nigorosw2">
<div id="nigoroswreset"></div><div class="swspace">&nbsp;</div>
<div id="nigoroswstart" onclick="swstarttiming()"></div>
</div></div><div style="clear:left"></div>
<div id="nigorocrsw">&copy;2009 Nigoro. All rights reserved.</div></div></div>
<script type="text/javascript"><!--
swinitialize();
//--></script>

タグ：ジャバスクリプト Date() ストップウォッチ Dateオブジェクト improvement JavaScript stopwatch 改良