マウスの操作(5)
マウスカーソルが要素に重なっている時間を秒単位で計測

var second=null;  //宣言、secondは空である
$(document).ready(function(ev) {   //ドキュメンンとが読み込まれてから実行
  var intvID=null;
  $('div#content').one('mouseover',function(ev) {
    intvID=setTimeout("void(0)",10);  //時間計測開始(1度だけ実行)
  }).hover(
   function(ev) {
     second=0;  //マウスカーソルが重なってからの経過時間を約1秒ごとに表示
     $(this).html('マウスカーソルが重なって<span id="second">0</span>秒経過');
     intvID=setInterval("$('span#second').text(++second);",999);
     },
     function(ev) {
       clearInterval(intvID);   //経過時間表示終了
       $(this).html('マウスカーソルは'+second+'秒間重なっていました');
  } );
} );


実行前(下の水色枠内にマウスカーソルを重ねる)
マウスカーソルをこの枠内に重ねてください


変更前のhtml
<div id="content">マウスカーソルをこの枠内に重ねてください</div>