jQuery API の event.timeStamp は、イベント発生時の、エポック秒(UNIX時間)を表すプロパティ。エポック秒(UNIX時間)とは、1970年1月1日0時0分0秒からの経過秒数のこと。
実装例(サンプル)
クリック
実装例(サンプル)の動作について
緑色のボックスをクリックすると、「クリック」のテキストが、「もう一度クリック」に変わる。もう一度クリックすると、「前回のクリックから○○○ミリ秒経過」と表示される。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
var last, diff;
jQuery( '#jquery-api-event-timeStamp' ) . click( function( event ) {
if ( last ) {
diff = event . timeStamp - last
jQuery( '#jquery-api-event-timeStamp' ) . append( '前回のクリックから' + diff + 'ミリ秒経過<br/>' );
jQuery( '#jquery-api-event-click' ) . text( '' );
} else {
jQuery( '#jquery-api-event-click' ) . text( 'もう一度クリック' );
}
last = event . timeStamp;
} );
} );
// -->
</script>
<!--
jQuery( function() {
var last, diff;
jQuery( '#jquery-api-event-timeStamp' ) . click( function( event ) {
if ( last ) {
diff = event . timeStamp - last
jQuery( '#jquery-api-event-timeStamp' ) . append( '前回のクリックから' + diff + 'ミリ秒経過<br/>' );
jQuery( '#jquery-api-event-click' ) . text( '' );
} else {
jQuery( '#jquery-api-event-click' ) . text( 'もう一度クリック' );
}
last = event . timeStamp;
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-event-timeStamp {
padding: 10px;
height: 300px;
overflow: auto;
background-color: green;
color: white;
border: 3px solid red;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-api-event-timeStamp {
padding: 10px;
height: 300px;
overflow: auto;
background-color: green;
color: white;
border: 3px solid red;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-api-event-timeStamp">
<span id="jquery-api-event-click">クリック</span>
</div>
<span id="jquery-api-event-click">クリック</span>
</div>