js code to record mouse trajectory and play back_javascript skills
May 16, 2016 pm 06:29 PMProblems 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:
//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
// 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 ]

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to watch replays of Tencent meetings

How to watch Tencent Classroom replays

How to display mouse movement trajectory in edge browser_Steps to display mouse movement trajectory in edge browser

How to watch the live broadcast replay of Huajiao

Can Amap ar navigation be played back_How to playback navigation on Amap ar

How to watch live replays on Huya Live. Specific steps to watch live replays on Huya Live.

How to implement the recording and playback function of the answering process in online answering

How to watch the live replay of Huya live broadcast? Where to watch the live replay of Huya anchor?
