我最近问了一个关于鼠标记录的问题。现在我需要弄清楚如何重播它。
最近的问题:https://stackoverflow.com/questions/8129723/record-mouse-movement-with-javascript
我将使用 PHP 制作当前页面的相同副本,然后将重播脚本插入其中。该脚本将根据多个 x 和 y 坐标相对于时间添加和移动绝对定位图像(以说明鼠标移动)。
是否有任何好的方法(比下面更好)来重播多个鼠标移动?
<input style="width:100%" type="text" name="onlyforstackoverflow1" value="0" size="4"><br>
<input style="width:100%" type="text" name="onlyforstackoverflow2" value="0" size="4">
<script>
// I want this (a very long array with x-cordinates, y-cordinates and time from pageload)
var very_long_array = [1,2,1000,2,22,2000,3,33,3645,4,44,3456];
// To become the same as this
setTimeout("document.Show.onlyforstackoverflow1.value = 1;document.Show.onlyforstackoverflow2.value = 11;",100)
setTimeout("document.Show.onlyforstackoverflow1.value = 2;document.Show.onlyforstackoverflow2.value = 22;",200)
setTimeout("document.Show.onlyforstackoverflow1.value = 3;document.Show.onlyforstackoverflow2.value = 33;",364)
setTimeout("document.Show.onlyforstackoverflow1.value = 4;document.Show.onlyforstackoverflow2.value = 44;",453)
// in the real script it will be moving around an image instead...
</script>
最佳答案
var dataList = [ 1, 2, 1000, 2, 22, 2000 ], // the long big array
preTime = 0;
function run() {
var parts = dataList.splice( 0, 3 ), // after splice, dataList will be auto updated
nowTime;
if ( parts.length == 3 ) {
nowTime = parts[ 2 ];
setTimeout( function() {
replay( parts[ 0 ], parts[ 1 ] ); // x = parts[ 0 ], y = parts[ 1 ]
preTime = nowTime;
// continue run next replay
run();
}, nowTime - preTime );
}
}
function replay( x, y ) {
// do something with x, y;
// document.Show.onlyforstackoverflow1.value = x;
// document.Show.onlyforstackoverflow2.value = y;
}
// start
run();
只需使用 setTimeout 来完成任务,您不需要将每个任务都写成一条语句:-)
关于javascript - 使用javascript重播鼠标移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8130473/