簡易ストップウォッチを、jQueryを使って作る方法。
実装例（サンプル）
実装例（サンプル）の動作について
- 「スタート」ボタンをクリックすると、タイムの計測を開始する。ボタンのテキストが「スタート」から「ストップ」に変わる。
- 「ストップ」ボタンをクリックすると、タイム計測を終了し、ボタンの横にタイムを表示する。ボタンのテキストが「ストップ」から「スタート」に変わる。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#operation' ) . toggle(
function() {
var $startDate = new Date();
var $startTime = $startDate.getTime();
jQuery( '#operation' ) . val( $startTime );
jQuery( '#operation' ) . text( 'ストップ' );
jQuery( '#sampleTime' ) . text( '' );
},
function() {
var $startTime = jQuery( '#operation' ) . val();
var $stopDate = new Date();
var $stopTime = $stopDate.getTime();
var $time = ( $stopTime - $startTime ) / 1000;
jQuery( '#sampleTime' ) . text( $time + '秒' );
jQuery( '#operation' ) . text( 'スタート' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#operation' ) . toggle(
function() {
var $startDate = new Date();
var $startTime = $startDate.getTime();
jQuery( '#operation' ) . val( $startTime );
jQuery( '#operation' ) . text( 'ストップ' );
jQuery( '#sampleTime' ) . text( '' );
},
function() {
var $startTime = jQuery( '#operation' ) . val();
var $stopDate = new Date();
var $stopTime = $stopDate.getTime();
var $time = ( $stopTime - $startTime ) / 1000;
jQuery( '#sampleTime' ) . text( $time + '秒' );
jQuery( '#operation' ) . text( 'スタート' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#sample {
font-size: 32px;
}
#operation {
font-size: 32px;
}
-->
</style>
<!--
#sample {
font-size: 32px;
}
#operation {
font-size: 32px;
}
-->
</style>
HTML
<div id="sample">
<button id="operation">スタート</button>
<span id="sampleTime"></span>
</div>
<button id="operation">スタート</button>
<span id="sampleTime"></span>
</div>