php 获取鼠标轨迹,记录鼠标的轨迹并回放的js代码_javascript技巧
遇到的问题:
Question
①:mousemove事件中,移动方法中会被记录很多的left和top,我只需要大概的几组数据就行,不需要那么多;
Question
②:回放的时候,在for循环里执行太快了,导致的效果就是直接看到开始跟结束位置,我想放慢中间的过程;搞了一个延迟的函数,但是还是没有实质性解决。
慢慢慢慢拖动小方块到一个新位置,然后松开鼠标,
先点击“复位”,再点击“回放”查看所经过的路径,
只有一次机会哦 - -|||
循环内延迟的部分代码:
//延迟方法
sleep: function(n) {
var start = new Date().getTime();
while (true)
if (new Date().getTime() - start > n)
break;
},
//回看轨迹记录
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;
//延迟循环方法
this.sleep(10);
}
}
还是没有达到慢慢回放的效果,待解决。。。
啊哈,今早解决了~!
不用for循环,通过定时器运用数组的下标来不断改变小方块的left和top
定时器结合数组下标
//延迟方法
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为数组下标
oSlippage.style.top = this.Y[this.iNum] - this.relativeY;
MOUSETRACKRECORD.iNum++;
//如果下标大于了他的长度就停止回放
if (this.iNum > this.X.length - 1) {
clearInterval(this.timeID);
}
},
//回看轨迹记录
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;
// //延迟循环方法
// this.sleep(10);
//}
this.timeID = setInterval("MOUSETRACKRECORD.sleep()", 10);
}
演示效果:
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php 获取鼠标轨迹,记录鼠标的轨迹并回放的js代码_javascript技巧相关推荐
- oracle 取农历函数,获取阴历(农历)和当前日期的js代码_javascript技巧
本文为大家分享了一段js显示阴历(农历)和当前日期的关键性代码,供大家参考,具体内容如下 var CalendarData=new Array(100); var madd=new Array(12) ...
- php 获取当前时间的农历,获取阴历(农历)和当前日期的js代码_javascript技巧
本文为大家分享了一段js显示阴历(农历)和当前日期的关键性代码,供大家参考,具体内容如下 var CalendarData=new Array(100); var madd=new Array(12) ...
- python实现轨迹回放_记录鼠标的轨迹并回放的js代码
遇到的问题: Question ①:mousemove事件中,移动方法中会被记录很多的left和top,我只需要大概的几组数据就行,不需要那么多: Question ②:回放的时候,在for循环里执行 ...
- php获取微信收款记录,微信公众号开发之微信支付代码记录的实现
需求说明 这个需求说明是完全没有必要的,但是还是写一下吧,但凡是做公众号的,一般都是需要了解这个微信支付的,不然基本的业务都没办法走,所以今天简单的记录一下微信支付的一些问题以及流程是怎么样的.记录的 ...
- 当鼠标滑过文本框自动选中输入框内容JS代码
代码: <html> <head> <title>响应鼠标自动选中文本框内容</title> </head> <body> &l ...
- 记录一个在线压缩和还原压缩js代码的工具
packer – javascript 压缩工具 http://dean.edwards.name/packer/ Javascript Beautifier ---可以恢复某些压缩工具压缩的js代码 ...
- 鼠标点击器20+版本使用教程系列(7)鼠标轨迹记录点击器1.1使用教程
鼠标点击器是我们经常使用的一款windows软件(其实手机端也很有需求),因此网上有很多功能不一点击软件,但是很多不能满足需求,今天带领大家了解我们开发系列的鼠标点击软件,多达20多个版本.今天为大家 ...
- python 鼠标轨迹录制_python记录鼠标滑动轨迹
一个记录鼠标轨迹的程序. 一直需要一个记录鼠标轨迹的程序,本想找一个,但是都不太合适,所以就自己写了一个.功能很简单,就是记录鼠标按下时的滑动轨迹. from pynput import mouse ...
- python鼠标移动轨迹_鼠标的另一种选择,肯辛通轨迹球能否改变固有的使用习惯?...
[引言] 鼠标,作为电脑甚至是现在Pad的外接输入设备,其地位从1964年雏形诞生的那一刻起便从未被撼动,哪怕是thinkpad的小红点以及外接触摸板的出现.鼠标最早只是一个装有两个滚轮(是圆盘型滚轮 ...
最新文章
- Huawei交换机配置两台交换机堆叠示例
- Python学习笔记:异步IO(2)
- html自定义工具条,为Autodesk Viewer添加自定义工具条的更好方法
- android头部固定悬停,Android开发上滑悬停且头部可刷新
- JAVA刷TNT_Java Blocks.tnt方法代码示例
- 我搜集的C++字符类型的相互转换
- 隐藏nginx 版本号信息
- 基于主机的入侵检测优缺点_如何建立我们的网络防线?入侵检测,确保我们的网络安全...
- CSS 实现必填项前/后添加红色星号
- 鸿蒙系统对小米的影响,“小米用鸿蒙系统”乌龙会对后续有影响吗
- 【hive】Hive的安装过程与配置的详解
- Python基础之赋值运算符
- 程序中使用log4J打印信息的两种方式
- fiddler响应中文乱码问题
- 2017实习生在线编程——奇虎360(分金子)
- java实现一个语法检查器_Java语法检查
- 6款炫酷的HTML5 3D特效源码
- QT实现绘制箱须图(盒须图)
- IP地址中的A、B、C类地址详解
- 利用tensorflow神经网络进行泰坦尼克的生存预测