我正在尝试创建一个分析程序,用于跟踪用户在网站上的鼠标移动并将数据存储在数据库中。这是我被困的地方:
假设鼠标总是从屏幕中间开始,并且指示用户将其移动到特定元素,我该如何确定该移动的效率和准确性。我需要记住从开始悬停到点击的持续时间,但我还要包括鼠标的悬停路径。
一个完美的分数将是从A点到B点的完美线,在x秒内,如何在2x秒内确定曲线路径的分数,或者在进入Point之前路径走向错误的方向的实例B'有没有算法?
感谢您的帮助!
答案 0 :(得分:2)
这是我创建的JSFiddle。单击“开始”框,然后单击“完成”框。希望这会帮助您开始。
var start = false;
var start_time,end_time;
var points = [];
$("#start").click(function() {
start = true;
points = [];
start_time = Date.now();
});
$("#finish").click(function() {
start = false;
distance = travelledDistance();
time = (Date.now() - start_time)/1000;
var center_x_start = $("#start").offset().left + $("#start").width() / 2;
var center_y_start = $("#start").offset().top + $("#start").height() / 2;
var center_x_finish = $("#finish").offset().left + $("#finish").width() / 2;
var center_y_finish = $("#finish").offset().top + $("#finish").height() / 2;
var straight_distance = Math.round(Math.sqrt(Math.pow(center_x_finish - center_x_start, 2) + Math.pow(center_y_finish - center_y_start, 2)));
$("#time").text(+time+"s");
$("#distance").text(distance+"px");
$("#straight_distance").text(straight_distance+"px");
});
$(document).mousemove(function( event ) {
if(!start)
return;
points.push(event.pageX + "," + event.pageY);
});
function travelledDistance(){
var distance = 0;
for (i = 0; i < points.length - 1; i++) {
start_point = points[i].split(",");
end_point = points[i+1].split(",");
distance += Math.round(Math.sqrt(Math.pow(end_point[0] - start_point[0], 2) + Math.pow(end_point[1] - start_point[1], 2)));
}
return distance;
}
<强>更新强>
我做了new version here。现在,您可以拖动目标以检查不同的结果。