Home Web Front-end JS Tutorial js code to record mouse trajectory and play back_javascript skills

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to watch replays of Tencent meetings How to watch replays of Tencent meetings Feb 24, 2024 am 11:10 AM

How to watch replays of Tencent meetings

How to watch Tencent Classroom replays How to watch Tencent Classroom replays Mar 02, 2024 pm 06:31 PM

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 display mouse movement trajectory in edge browser_Steps to display mouse movement trajectory in edge browser Apr 02, 2024 pm 05:30 PM

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 How to watch the live broadcast replay of Huajiao Feb 23, 2024 pm 04:04 PM

How to watch the live broadcast replay of Huajiao

Can Amap ar navigation be played back_How to playback navigation on Amap ar Can Amap ar navigation be played back_How to playback navigation on Amap ar Apr 01, 2024 pm 08:28 PM

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 watch live replays on Huya Live. Specific steps to watch live replays on Huya Live. Mar 29, 2024 am 08:11 AM

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 implement the recording and playback function of the answering process in online answering Sep 24, 2023 am 11:01 AM

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? How to watch the live replay of Huya live broadcast? Where to watch the live replay of Huya anchor? Mar 30, 2024 pm 04:11 PM

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

See all articles