如何確定在Javascript中從點A到點B的鼠標移動效率？

我正在嘗試創建一個分析程序，用於跟蹤用戶在網站上的鼠標移動並將數據存儲在數據庫中。這裏是我被卡住的地方：如何確定在Javascript中從點A到點B的鼠標移動效率？

假設鼠標總是從屏幕中間開始，並且指示用戶將其移動到特定元素，那麼我如何確定該移動的效率和準確性。我需要記住從盤旋開始到點擊的持續時間，但我還想包括鼠標的懸停路徑。

完美的得分在x秒內是從A點到B點的完美線條，我如何確定2秒鐘內曲線路徑的得分，或者在繼續進行之前路徑朝着錯誤方向行進的情況下B點？現有算法嗎？

感謝您的幫助！

2015-09-21 Alex

我想你是在要求我們設計一個在你腦海中還不清楚的算法。這個網站適用於你有算法的時候，你試圖實現它，並且你正面臨一個技術問題。 –

這是我創建的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; 
}

UPDATE

我做了一個new version here。現在您可以拖動目標來檢查不同的結果。

來源

2015-09-21 17:28:19

如何確定在Javascript中從點A到點B的鼠標移動效率？

回答

相關問題