在这里只需要一点帮助。我的问题是,当我悬停特定元素时如何计算秒数。例如,当我将鼠标悬停在按钮上时,如何计算鼠标悬停后我停留在该按钮上的秒数?
问问题
3916 次
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);
}
);
于 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 回答