jQueryを使い、ストップウォッチを作る方法。
jQueryを使わずに、JavaScriptでストップウォッチを作る方法については、「JavaScriptで作るストップウォッチ」のページへ。
実装例
00
:
00
:
00
:
000
実装例(サンプル)の動作について
- 「スタート」ボタンをクリックすると、タイムの計測を開始する。ボタンのテキストが「スタート」から「ストップ」に変わる。
- 「ストップ」ボタンをクリックすると、タイム計測を一時停止する。ボタンのテキストが「ストップ」から「スタート」に変わる。
- 「クリア」ボタンをクリックすると、タイムを「 00 : 00 : 00 : 000 」にリセットする。
ソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#stopwatchStartAndStop' ) . toggle(
function() {
stopwatchStart();
},
function() {
stopwatchStop();
}
);
jQuery( '#stopwatchClear' ) . click(
function() {
stopwatchClear();
}
);
} );
var $enable = false, $stopwatchTime, $startTime, $stopwatchTimeAdd = 0;
function stopwatchStart() {
jQuery( '#stopwatchStartAndStop' ).text( 'ストップ' );
if( $startTime === undefined ){
var $startDate = new Date();
$startTime = $startDate.getTime();
}
var $nowDate = new Date();
$stopwatchTime = $nowDate.getTime() - $startTime + $stopwatchTimeAdd;
$stopwatchMillisecond = $stopwatchTime % 1000;
$stopwatchSecond = Math.floor( $stopwatchTime / 1000 ) % 60;
$stopwatchMinute = Math.floor( $stopwatchTime / 1000 / 60 ) % 60;
$stopwatchHour = Math.floor( Math.floor( $stopwatchTime / 1000 / 60 ) / 60 );
if( $stopwatchMillisecond < 10 ){
$stopwatchMillisecond = '0' + $stopwatchMillisecond;
}
if( $stopwatchMillisecond < 100 ){
$stopwatchMillisecond = '0' + $stopwatchMillisecond;
}
if( $stopwatchSecond < 10 ){
$stopwatchSecond = '0' + $stopwatchSecond;
}
if( $stopwatchMinute < 10 ){
$stopwatchMinute = '0' + $stopwatchMinute;
}
if( $stopwatchHour < 10 ){
$stopwatchHour = '0' + $stopwatchHour;
}
jQuery( '#stopwatchHour' ).text( $stopwatchHour );
jQuery( '#stopwatchMinute' ).text( $stopwatchMinute );
jQuery( '#stopwatchSecond' ).text( $stopwatchSecond );
jQuery( '#stopwatchMillisecond' ).text( $stopwatchMillisecond );
$stopwatch = setTimeout( "stopwatchStart()", 1 );
}
function stopwatchStop() {
jQuery( '#stopwatchStartAndStop' ).text( 'スタート' );
clearTimeout( $stopwatch );
$startTime = undefined;
$stopwatchTimeAdd = $stopwatchTime;
}
function stopwatchClear() {
$startTime = undefined;
$stopwatchTimeAdd = 0;
jQuery( '#stopwatchHour' ).text( '00' );
jQuery( '#stopwatchMinute' ).text( '00' );
jQuery( '#stopwatchSecond' ).text( '00' );
jQuery( '#stopwatchMillisecond' ).text( '000' );
}
// -->
</script>
<!--
jQuery( function() {
jQuery( '#stopwatchStartAndStop' ) . toggle(
function() {
stopwatchStart();
},
function() {
stopwatchStop();
}
);
jQuery( '#stopwatchClear' ) . click(
function() {
stopwatchClear();
}
);
} );
var $enable = false, $stopwatchTime, $startTime, $stopwatchTimeAdd = 0;
function stopwatchStart() {
jQuery( '#stopwatchStartAndStop' ).text( 'ストップ' );
if( $startTime === undefined ){
var $startDate = new Date();
$startTime = $startDate.getTime();
}
var $nowDate = new Date();
$stopwatchTime = $nowDate.getTime() - $startTime + $stopwatchTimeAdd;
$stopwatchMillisecond = $stopwatchTime % 1000;
$stopwatchSecond = Math.floor( $stopwatchTime / 1000 ) % 60;
$stopwatchMinute = Math.floor( $stopwatchTime / 1000 / 60 ) % 60;
$stopwatchHour = Math.floor( Math.floor( $stopwatchTime / 1000 / 60 ) / 60 );
if( $stopwatchMillisecond < 10 ){
$stopwatchMillisecond = '0' + $stopwatchMillisecond;
}
if( $stopwatchMillisecond < 100 ){
$stopwatchMillisecond = '0' + $stopwatchMillisecond;
}
if( $stopwatchSecond < 10 ){
$stopwatchSecond = '0' + $stopwatchSecond;
}
if( $stopwatchMinute < 10 ){
$stopwatchMinute = '0' + $stopwatchMinute;
}
if( $stopwatchHour < 10 ){
$stopwatchHour = '0' + $stopwatchHour;
}
jQuery( '#stopwatchHour' ).text( $stopwatchHour );
jQuery( '#stopwatchMinute' ).text( $stopwatchMinute );
jQuery( '#stopwatchSecond' ).text( $stopwatchSecond );
jQuery( '#stopwatchMillisecond' ).text( $stopwatchMillisecond );
$stopwatch = setTimeout( "stopwatchStart()", 1 );
}
function stopwatchStop() {
jQuery( '#stopwatchStartAndStop' ).text( 'スタート' );
clearTimeout( $stopwatch );
$startTime = undefined;
$stopwatchTimeAdd = $stopwatchTime;
}
function stopwatchClear() {
$startTime = undefined;
$stopwatchTimeAdd = 0;
jQuery( '#stopwatchHour' ).text( '00' );
jQuery( '#stopwatchMinute' ).text( '00' );
jQuery( '#stopwatchSecond' ).text( '00' );
jQuery( '#stopwatchMillisecond' ).text( '000' );
}
// -->
</script>
HTML
<div id="stopwatchWrapper">
<div id="stopwatch">
<span id="stopwatchHour">00</span>
<span>:</span>
<span id="stopwatchMinute">00</span>
<span>:</span>
<span id="stopwatchSecond">00</span>
<span>:</span>
<span id="stopwatchMillisecond">000</span>
</div>
<div id="stopwatchControl">
<button id="stopwatchStartAndStop">スタート</button>
<button id="stopwatchClear">クリア</button>
</div>
</div>
<div id="stopwatch">
<span id="stopwatchHour">00</span>
<span>:</span>
<span id="stopwatchMinute">00</span>
<span>:</span>
<span id="stopwatchSecond">00</span>
<span>:</span>
<span id="stopwatchMillisecond">000</span>
</div>
<div id="stopwatchControl">
<button id="stopwatchStartAndStop">スタート</button>
<button id="stopwatchClear">クリア</button>
</div>
</div>
CSS
<style type="text/css">
<!--
div#stopwatchWrapper {
text-align: center;
}
div#stopwatch {
font-weight: bold;
font-size: 30px;
text-align: center;
width: 396px;
padding-top: 50px;
padding-bottom: 50px;
border: 2px #000000 solid;
border-radius: 6px;
}
#stopwatchControl {
text-align: center;
width: 400px;
}
#stopwatchControl button {
font-size: 30px;
width: 6em;
}
-->
</style>
<!--
div#stopwatchWrapper {
text-align: center;
}
div#stopwatch {
font-weight: bold;
font-size: 30px;
text-align: center;
width: 396px;
padding-top: 50px;
padding-bottom: 50px;
border: 2px #000000 solid;
border-radius: 6px;
}
#stopwatchControl {
text-align: center;
width: 400px;
}
#stopwatchControl button {
font-size: 30px;
width: 6em;
}
-->
</style>