记录鼠标的轨迹并回放的js代码

160 阅读 0 评论 106 点赞

我是靠谱客的博主无情棒棒糖，最近开发中收集的这篇文章主要介绍记录鼠标的轨迹并回放的js代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

遇到的问题：
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); 
} 