记录鼠标的轨迹并回放的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 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 // 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);
}

演示效果：

<script type="text/javascript"> MOUSETRACKRECORD = { oSlippage: null, //小方块 X: [], //X坐标 Y: [], //Y坐标 clickX: 0, //鼠标点击时的X坐标 clickY: 0, //鼠标点击时的Y坐标 relativeX: 0, //鼠标相对方块的X坐标 relativeY: 0, //鼠标相对方块的Y坐标 isCanMove: false, //是否可以移动 iNum: 0, //坐标XY数组的下标 timeID: null, //回放定时器 //鼠标按下的时候 mouseDown: function() { //鼠标点击时 this.clickX = event.clientX; this.clickY = event.clientY; //获取小方块 var oSlippage = document.getElementById("slippage"); //获取div当前坐标(左边界和上边界) var divX = parseInt(oSlippage.style.left) || 0; var divY = parseInt(oSlippage.style.top) || 0; //获取鼠标相对div的坐标 this.relativeX = this.clickX - divX; this.relativeY = this.clickY - divY; //设置可以移动 this.isCanMove = true; }, //鼠标移动的时候 mouseMove: function() { if (this.isCanMove) { var oSlippage = document.getElementById("slippage"); oSlippage.style.left = event.clientX - this.relativeX; oSlippage.style.top = event.clientY - this.relativeY; //移动就记录下鼠标的轨迹 MOUSETRACKRECORD.startRecord(event.clientX, event.clientY); } }, //鼠标松开的时候 mouseUp: function() { //取消小方块的mousemove事件 var oSlippage = document.getElementById("slippage"); oSlippage.onmousemove = null; this.isCanMove = false; //停止记录 clearInterval(this.timeID); }, //开始记录鼠标移动过的坐标 startRecord: function(x, y) { this.X.push(x); this.Y.push(y); }, //点击停止按钮，回到初始状态 overTrack: function() { var oSlippage = document.getElementById("slippage"); oSlippage.style.left = 50; oSlippage.style.top = 50; }, //延迟方法 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; 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); }, //初始化 init: function() { location.reload(); } } </script> <div style="border-bottom: #000000 1px solid; position: relative; border-left: #000000 1px solid; width: 500px; height: 200px; border-top: #000000 1px solid; border-right: #000000 1px solid" id="map"> <div style="z-index: 99; position: absolute; background-color: #000000; width: 30px; height: 30px; top: 50px; cursor: move; left: 50px; background-origin: initial; background-clip: initial" id="slippage" onmouseup="MOUSETRACKRECORD.mouseUp();" onmousemove="MOUSETRACKRECORD.mouseMove();" onmousedown="MOUSETRACKRECORD.mouseDown();"></div> </div> <input id="Button1" onclick="MOUSETRACKRECORD.overTrack();" value="复位" type="button"> <input id="Button2" onclick="MOUSETRACKRECORD.backTrack();" value="回放" type="button"> <input id="Button3" onclick="MOUSETRACKRECORD.init();" value="再来一次" type="button">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]