Problems:
Question
①: In the mousemove event, many left and top records are recorded in the moving method. I only need a few groups of data and do not need that much;
Question
②: During playback, the execution in the for loop is too fast. The result is that you can directly see the start and end positions. I want to slow down the process. I created a delay function, but there is still no substantive solution.
Slowly drag the small square to a new position, and then release the mouse,
Click "reset", and then click "playback" to view the path,
Only one chance--|
Code for latency in a loop:
Copy codeThe Code is as follows:
// Latency Method
Sleep: function (n ){
Var start = new Date (). getTime ();
While (true)
If (new Date (). getTime ()-start> n)
Break;
},
// Playback 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;
// Method of delay Loop
This. sleep (10 );
}
}
Still not achieving the effect of Slow playback, to be solved...
Aha, solved this morning ~!
The for loop is not used. The timer uses the subscript of the array to continuously change the left and top of the small square.
Timer combined with array subscript
Copy codeThe Code is as follows:
// Latency Method
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 is the array subscript.
OSlippage. style. top = this. Y [this. iNum]-this. relativeY;
MOUSETRACKRECORD. iNum ++;
// If the subscript exceeds its length, the playback is stopped.
If (this. iNum> this. X. length-1 ){
ClearInterval (this. timeID );
}
},
// Playback 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;
//// Method of delayed Loop
// This. sleep (10 );
//}
This. timeID = setInterval ("MOUSETRACKRECORD. sleep ()", 10 );
}
Demo effect:
<Input id = "Button1" onclick = "MOUSETRACKRECORD. overTrack (); "value =" reset "type =" button "> <input id =" Button2 "onclick =" MOUSETRACKRECORD. backTrack (); "value =" playback "type =" button "> <input id =" Button3 "onclick =" MOUSETRACKRECORD. init (); "value =" again "type =" button ">
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]