jQueryで作る簡易ストップウォッチ

簡易ストップウォッチを、jQueryを使って作る方法。

実装例(サンプル)

実装例(サンプル)の動作について

  1. 「スタート」ボタンをクリックすると、タイムの計測を開始する。ボタンのテキストが「スタート」から「ストップ」に変わる。
  2. 「ストップ」ボタンをクリックすると、タイム計測を終了し、ボタンの横にタイムを表示する。ボタンのテキストが「ストップ」から「スタート」に変わる。

実装例(サンプル)のソースコード

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>

CSS

<style type="text/css">
<!--
#sample {
    font-size: 32px;
}
#operation {
    font-size: 32px;
}
-->
</style>

HTML

<div id="sample">
    <button id="operation">スタート</button>
    <span id="sampleTime"></span>
</div>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, 時間, 逆引き パーマリンク