js code to record mouse trajectory and play back_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

js code to record mouse trajectory and play back_javascript skills

May 16, 2016 pm 06:29 PM

Playback mouse track

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: 

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn