js code to record mouse trajectory and play back_javascript skills

Problems encountered:
Question
①: In the mousemove event, a lot of left and top will be recorded in the move method. I only need a few sets of data, not so much;
Question
②: During playback, the execution in the for loop was too fast, and the result was that the start and end positions were directly visible. I wanted to slow down the middle process; I created a delay function, but there was still no substantial solution. .

Slowly drag the small square to a new position, then release the mouse,

Click "Reset" first, then click "Playback" to view the path passed,
There is only one chance - -|||
Part of the code delayed in the loop:

Copy code The code is as follows:

//Delay method
sleep: function(n) {
var start = new Date().getTime();
while (true)
if (new Date().getTime() - start > n)
break;
},
//Look back at the track record
backTrack: function() {
var oSlippage = document.getElementById("slippage");
var len = this.X.length;
for (var i = 0; i < len; i ) {
oSlippage.style.left = this. 🎜>}
}


The effect of slow playback is still not achieved and needs to be solved. . .
Aha, it was solved this morning~!
No need for for loop, use the timer to use the array subscript to continuously change the left and top of the small square

Timer combined with the array subscript



Copy code

The code is as follows: //Delay methodsleep: 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 is the array subscript
oSlippage.style.top = this.Y[this.iNum] - this.relativeY;
MOUSETRACKRECORD.iNum ;
//If the subscript is greater than its length, stop playback
if (this.iNum > this.X .length - 1) {
clearInterval(this.timeID);
}
},
//Look back at the track record
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;
// //Delay loop method
// this.sleep(10);
//}
this.timeID = setInterval("MOUSETRACKRECORD.sleep()", 10);
}


Demo Effect:

<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 select all Note: If you need to introduce external Js, you need to refresh to execute ]