質問: ### 前提・実現したいこと **前提** プログラム超初心者&独学です。 そもそもどのように検索すればいいかわからない事が多く,質問させていただきます。 用語や表現などが間違っているかもしれないので,不快に思われたら申し訳ありません。 (間違っていたら教えてください!) **実現したいこと** * 以下のページのExampleにあるデモのように,mouseoverで画像が替わり,mouseoutで元の画像に戻るような設定をしたい <参考> http://www.mouselabweb.org/index.html * (1)mouseoverを始めた時間と(2)mouseoverを終了した時間を記録して,csvファイルで出力したい * Node.jsで実装したい ### 試したこと * 「マウスホバー 画像切り替え」で検索したら,jQueryで作っているページが多かったので,参考にしつつjQueryで作成した ``` jQueryの練習 ``` * 画像はいらすとやのものです https://www.irasutoya.com/2019/01/blog-post_228.html ### わからないこと 1. マウスホバーで画像が切り替わるような仕様は作れたが,ホバー時間の記録のやり方がわからない ホバー時間の記録は,このページにあるような処理時間計測で可能なのか? http://write-remember.com/program/javascript/console_time/ 2. 記録した時間をcsvファイルに出力するにはどうすれば良いのか? 検索ワードなどを教えていただけると助かります。 よろしくお願いします。
回答: jQueryコードにややおかしい点があるので以下のように直してみましょう。 ``` var startHoverTime; var endHoverTime; var hoverDuration; function inputCSV() { console.log('csv出力処理をかく') } $('.img').hover( function() { startHoverTime = new Date(); $(this).attr('src', 'smartphone_blank_man.png'); }, function() { endHoverTime = new Date(); //ミリ秒 hoverDuration = endHoverTime - startHoverTime; console.log(hoverDuration) $(this).attr('src', 'smartphone_blank_man.png'); inputCSV() }); ``` また、CSV出力についてはとりあえずやるだけなら以下の記事など参考になりそうです。 https://macoblog.com/jquery-csv-download/ 余談ですが、ご提示のコードブロックにjQueryと指定されていますが、ただしくはhtmlになります。