php 获取鼠标轨迹,记录鼠标的轨迹并回放的js代码_javascript技巧

遇到的问题：

Question

①：mousemove事件中，移动方法中会被记录很多的left和top，我只需要大概的几组数据就行，不需要那么多；

Question

②：回放的时候，在for循环里执行太快了，导致的效果就是直接看到开始跟结束位置，我想放慢中间的过程；搞了一个延迟的函数，但是还是没有实质性解决。

慢慢慢慢拖动小方块到一个新位置，然后松开鼠标，

先点击“复位”，再点击“回放”查看所经过的路径，

只有一次机会哦 - -|||

循环内延迟的部分代码：

//延迟方法

sleep: function(n) {

var start = new Date().getTime();

while (true)

if (new Date().getTime() - start > n)

break;

},

//回看轨迹记录

backTrack: function() {

var oSlippage = document.getElementById("slippage");

var len = this.X.length;

for (var i = 0; i < len; i++) {

oSlippage.style.left = this.X[i] - this.relativeX;

oSlippage.style.top = this.Y[i] - this.relativeY;

//延迟循环方法

this.sleep(10);

}

}

还是没有达到慢慢回放的效果，待解决。。。

啊哈，今早解决了~！

不用for循环，通过定时器运用数组的下标来不断改变小方块的left和top

定时器结合数组下标

//延迟方法

sleep: function(n) {

//var start = new Date().getTime();

//while (true)

// if (new Date().getTime() - start > n)

// break;

var oSlippage = document.getElementById("slippage");

oSlippage.style.left = this.X[this.iNum] - this.relativeX; //iNum为数组下标

oSlippage.style.top = this.Y[this.iNum] - this.relativeY;

MOUSETRACKRECORD.iNum++;

//如果下标大于了他的长度就停止回放

if (this.iNum > this.X.length - 1) {

clearInterval(this.timeID);

}

},

//回看轨迹记录

backTrack: function() {

//var oSlippage = document.getElementById("slippage");

//var len = this.X.length;

//for (var i = 0; i < len; i++) {

// oSlippage.style.left = this.X[i] - this.relativeX;

// oSlippage.style.top = this.Y[i] - this.relativeY;

// //延迟循环方法

// this.sleep(10);

//}

this.timeID = setInterval("MOUSETRACKRECORD.sleep()", 10);

}

演示效果：

本文原创发布php中文网，转载请注明出处，感谢您的尊重！