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

jQueryを使い、ストップウォッチを作る方法。

jQueryを使わずに、JavaScriptでストップウォッチを作る方法については、「JavaScriptで作るストップウォッチ」のページへ。

実装例

00 : 00 : 00 : 000

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

  1. 「スタート」ボタンをクリックすると、タイムの計測を開始する。ボタンのテキストが「スタート」から「ストップ」に変わる。
  2. 「ストップ」ボタンをクリックすると、タイム計測を一時停止する。ボタンのテキストが「ストップ」から「スタート」に変わる。
  3. 「クリア」ボタンをクリックすると、タイムを「 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>

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>

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>

スポンサード リンク

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