python实现轨迹回放_记录鼠标的轨迹并回放的js代码
遇到的问题:
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);
}
演示效果:
MOUSETRACKRECORD = {
oSlippage: null, //小方块
X: [], //X坐标
Y: [], //Y坐标
clickX: 0, //鼠标点击时的X坐标
clickY: 0, //鼠标点击时的Y坐标
relativeX: 0, //鼠标相对方块的X坐标
relativeY: 0, //鼠标相对方块的Y坐标
isCanMove: false, //是否可以移动
iNum: 0, //坐标XY数组的下标
timeID: null, //回放定时器
//鼠标按下的时候
mouseDown: function() {
//鼠标点击时
this.clickX = event.clientX;
this.clickY = event.clientY;
//获取小方块
var oSlippage = document.getElementById("slippage");
//获取div当前坐标(左边界和上边界)
var divX = parseInt(oSlippage.style.left) || 0;
var divY = parseInt(oSlippage.style.top) || 0;
//获取鼠标相对div的坐标
this.relativeX = this.clickX - divX;
this.relativeY = this.clickY - divY;
//设置可以移动
this.isCanMove = true;
},
//鼠标移动的时候
mouseMove: function() {
if (this.isCanMove) {
var oSlippage = document.getElementById("slippage");
oSlippage.style.left = event.clientX - this.relativeX;
oSlippage.style.top = event.clientY - this.relativeY;
//移动就记录下鼠标的轨迹
MOUSETRACKRECORD.startRecord(event.clientX, event.clientY);
}
},
//鼠标松开的时候
mouseUp: function() {
//取消小方块的mousemove事件
var oSlippage = document.getElementById("slippage");
oSlippage.onmousemove = null;
this.isCanMove = false;
//停止记录
clearInterval(this.timeID);
},
//开始记录鼠标移动过的坐标
startRecord: function(x, y) {
this.X.push(x);
this.Y.push(y);
},
//点击停止按钮,回到初始状态
overTrack: function() {
var oSlippage = document.getElementById("slippage");
oSlippage.style.left = 50;
oSlippage.style.top = 50;
},
//延迟方法
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;
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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
时间: 2010-04-16
python实现轨迹回放_记录鼠标的轨迹并回放的js代码相关推荐
- python 鼠标轨迹录制_python记录鼠标滑动轨迹
一个记录鼠标轨迹的程序. 一直需要一个记录鼠标轨迹的程序,本想找一个,但是都不太合适,所以就自己写了一个.功能很简单,就是记录鼠标按下时的滑动轨迹. from pynput import mouse ...
- python 鼠标轨迹录制_按键鼠标轨迹录制大师
专业高效的Windows鼠标键盘录制工具 一切只为提升效率,专注专业 http://mouse.downjia.com/ 智能操作 让乏味的重复的操作变的简单,有趣,精彩..... 操作技术 简单高效 ...
- php 获取鼠标轨迹,记录鼠标的轨迹并回放的js代码_javascript技巧
遇到的问题: Question ①:mousemove事件中,移动方法中会被记录很多的left和top,我只需要大概的几组数据就行,不需要那么多: Question ②:回放的时候,在for循环里执行 ...
- python建站部署_记录一下自己的建站过程(四)MongoDB与Pymongo
前言 以前我在看关于架设网站的相关帖子时,就觉得为什么他们非得用数据库?我在课堂里学的数据库不就是一个存储和读取数据的外部系统么,理论上,不使用数据库也能架设网站的.然而,各大云计算平台,鸟哥的lin ...
- 我的python学习笔记全集_记录我的Python学习笔记
不想再像以前那样,什么都从头开始学习语法.总结语法,这样反而会过分纠结于语法,耽误了开发,毕竟语言的主要属性是工具,次要的属性是语言本身. 所以还是先熟练使用语言去进行开发,等足够熟悉了,再去研究语言 ...
- python协程框架_[记录]python的简单协程框架(回调+时间循环+select)
# -*- coding: utf-8 -*- # @Time : 2018/12/15 18:55 # @File : coroutine.py #一个简单的 Coroutine 框架 import ...
- python csv文件创建时间_记录 python 根据csv文件自动创建表插入数据
# -*- coding: utf-8 -*- importos importpymysql importpandas aspd # 1.连接 Mysql 数据库 try: conn = pymysq ...
- 添加轨迹运动_时间最优轨迹(资料)
TOTG算法--Time-Optimal Trajectory Generation 论文及源码地址:http://www.golems.org/projects/traj.html As a sid ...
- 轨迹分析_解析几何中的轨迹问题中经典问题,有详细分析及其解答
曲线与方程是解析几何的重点,解析几何问题都 离不开对曲线与方程的研究,因此求曲线的轨迹方程 就成了研究解析几何问题的一个重点问题.纵 观 曲 线的轨迹 方 程 问 题,可发现其题型典型. 一.直接法 ...
最新文章
- 【WEB安全】In0ri:基于深度学习的网站内容污染检测系统
- 负载均衡设备oracle,Oracle RAC 服务器端联接负载均衡(Load Balance)
- CAD公差表以及如何算
- BZOJ4557:[JLOI2016/SHOI2016]侦察守卫——题解
- python函数sn_Python plist.SndRcvList方法代码示例
- maven 执行testng.xml文件失败解决问题
- Java中VO/DTO/DO/PO/POJO/BO/DAO概念及其区别
- 万字长文干货,广告投放中常说的CPA、CPC、CPD、CPT、CPS、CPM、CPI是什么意思?
- # 研究杂感 × VOSviewer(第六辑)
- 《应用回归及分类》学习笔记1
- 电厂的计算机人员职位结构简图,我们电厂汽轮机结构示意图(老师傅整理)
- 计算100以内奇数和偶数的数量
- 在桌面为计算机程序创建快捷方式,什么是快捷方式,电脑快捷方式有什么用?...
- 机器学习在金融风控的经验总结!
- 面试官:什么是责任链模式?
- 有度即时通系统安全技术原理
- 无需Root 手机装电脑系统 虚拟机
- Linux远程控制音乐播放,总结一下linux远程控制方法
- 53、RK3588测试视频编解码和 POE OAK Camera编码结合开发
- 荧光激活细胞分选( FACS)