3

在这里只需要一点帮助。我的问题是，当我悬停特定元素时如何计算秒数。例如，当我将鼠标悬停在按钮上时，如何计算鼠标悬停后我停留在该按钮上的秒数？

4

7 回答 7

2

一个简单的例子

var timer;
// Bind the mouseover and mouseleave events
$('button').on({
    mouseover: function() {
        // set the variable to the current time
        timer = Date.now();
    },
    mouseleave: function() {
        // get the difference
        timer = Date.now() - timer;  
         console.log( parseFloat(timer/1000) + " seconds");
        timer = null;        
    }
});

检查小提琴

于 2013-07-24T07:02:38.497 回答
2

使用setInterval. 在这里演示

var counter = 0;
var myInterval =null;
$(document).ready(function(){
    $("div").hover(function(e){
        counter = 0;
        myInterval = setInterval(function () {
            ++counter;
        }, 1000);
    },function(e){
        clearInterval(myInterval);
        alert(counter);
    });
});
于 2013-07-24T07:07:14.440 回答
2

我刚刚淘汰的这个快速插件怎么样，它可以在多个元素上工作，并且不使用任何全局变量：

(function($) {
    $.fn.hoverTimer = function() {
        return this.on({
            'mouseenter.timer': function(ev) {
                 $(this).data('enter', ev.timeStamp);
             },
             'mouseleave.timer': function(ev) {
                 var enter = $(this).data('enter');
                 if (enter) {
                     console.log(this, ev.timeStamp - enter);
                 }
              }
         });
    };
})(jQuery);

实际上禁用该功能留给读者练习；-)

演示在http://jsfiddle.net/alnitak/r9XkX/

恕我直言，任何使用计时器的东西都是一个糟糕的实现。无需使用（不准确的）计时器事件来“计算”秒数就可以轻松记录时间。哎呀，事件对象甚至包含当前时间，如上所用。

于 2013-07-24T07:16:53.897 回答
1

这是考试：

var begin = 0;
var end = 0;

$('#btn').hover(function () {
   begin = new Date().getTime();
});

$('#btn').leave(function () {
   end = new Date().getTime();
   sec = (end - begin) / 1000;
   alert(sec);
});
于 2013-07-24T07:02:44.760 回答
1

一种解决方法是event.timeStamp方法：

var initial_hover, exit_hover;
$('#ele').hover(
    function(event){
        initial_hover = event.timeStamp
        console.log(initial_hover);
    },
    function(event){
        exit_hover = event.timeStamp
        $(this).html(exit_hover - initial_hover);
        console.log(exit_hover);
    }
);

jsfiddle

于 2013-07-24T07:07:47.293 回答
0

你已经用 JQuery 标记了这个问题，所以这里有一个 jQuery 解决方案。

$(element).on('mouseover', function(e){
    $(e.target).data('hover-start', new Date().getTime());
});

$(element).on('mouseout', function(e){
    // count the difference
    var difference = new Date().getTime() - $(e.target).data('hover-start');
    // clean up the data
    $(e.target).data('hover-start', undefined);

    console.log('Mouse was over for', difference/1000, 'seconds');
});
于 2013-07-24T07:01:15.413 回答
0

使用 setInterval 并将值存储在变量中。在 mouserover 上调用函数。

function mouseover(){
  var start = 0;
  setInterval(function(){
    start++;
    var count = start;
  }, 1000);
}
于 2013-07-24T07:14:38.607 回答