jQuery录制/播放鼠标移动

工作原理：

按下“录制”按钮并开始在红色div中单击，黑匣子将开始跟随您的单击，仅使用黑匣子内的鼠标滚轮调整其大小。 完成后，按播放按钮。 重置按钮重置坐标和计数器

它并不完美，我是jQuery的初学者，但至少它可以工作

我写这个问题是因为我想实现某种计时器，以毫秒计，每毫秒存储在一个数组中。 在这个数组中，每毫秒，盒子的当前坐标和大小都会被存储，所以当你运行它时，它会在你“记录它”的确切时间间隔之后移动盒子并调整它的大小

例：

我希望我能解释清楚。

我的方法是使用

new Date().getTime(); //  gets the time value in milliseconds from a current date.

新变量：

clickTime = [];
timeDiffs = [];
start = 0;

按下记录按钮时，首先记录开始时间。 然后，每次单击事件发生时，用当前时间（以毫秒为单位）更新clickTime

然后，在单击事件中执行以下操作：

if(i == 0){
  timeDiffs[i] = new Date().getTime() - startTime;
}else{
  timeDiffs[i] = new Date().getTime() - clickTime[i-1];
}

第一次计算当前时间和开始时间之间的时间差。对于下一次单击，从当前时间减去最后一次单击时间，这样我们将得到后续单击之间的差值（以毫秒为单位）

就这些，现在

$(".inner").animate( { left: arrX[i], top: arrY[i]}, timeDiffs[i]);

工作区：

我发现您希望在“精确的时间间隔之后”执行这些操作，因此您可以使用jQuery.delay（）方法

我希望，我给了你一个线索，如何做你想做的事。

给你：

---

抱歉，代码中没有注释，因此您必须自己解决。我还修复了我在对你的问题的评论中提到的调整大小的错误，并且我也这样做了，当你点击开始时，记录按钮中的文本会变回记录。

这对“初学者”来说非常聪明；）谢谢@Rob:）这是我的雇主给我的一项任务，让我自己更快地理解和学习jQuery，但计时器是我的想法，让它“更平滑”，现在它让我很烦。正如你所知，大小调整器非常容易出错，如果我单击某个地方，调整大小，然后单击其他地方，当我重放它时：移动正方形，再次移动它，然后在最后调整它的大小。这非常有效！谢谢，我玩了一点我的版本，但我把它放在一边，因为没有人回答：我确实改变了一些东西，但我没有实现定时动画。等我有空的时候再调查一下。如果你有兴趣，我现在就发布我的版本：）我明白了。显然，我的版本没有跟踪功能和移动速度设置器（我没有时间实现它们），但如果您感兴趣，actionsArr是一个表示每个动作的对象数组。每个对象都有操作发生的时间（自用户单击记录后以毫秒为单位）、左值和顶值以及高度和宽度值。如果您想知道我是如何使“播放”按钮工作的，我将在下一个注释中解释，因为这个按钮已没有字符了“播放”按钮通过迭代函数工作。这不是一个循环。j变量是计数器。对于actionsArr数组中的每个操作，都会调用iterate。iterate的作用如下：它确保当前操作存在，如果存在，则创建一个onTimer函数，当当前操作的时间指定的时间过去时，将调用该函数。这意味着，对于存在的每个操作，适当调整大小和移动正方形的函数被设置为在正确的时间量之后运行。迭代然后递增计数器，然后再调用它自己。如果您想知道onTimer.j部分，我可以解释。j、 每次调用iterate时，iterate的计数器变量都会递增。iterate在所有必要的时候都被调用，几乎是立即调用的。这意味着当ontimer开始执行时，j将被设置为actionsArr的长度，因此意味着ontimer将全部作用于actionsArr的一个不存在的索引上（因为此时actionsArr[j]未定义，因为j设置为actionsArr的数组长度，因为iterate为actionsArr的每个元素增加了它）。一个鲜为人知的事实是，您可以将属性添加到函数中，就像它是一个对象一样，并且您还可以读取这些属性。该功能仍将工作。因此，当调用iterate时，j是当前索引。onTimer是一个局部变量，因此这实际上意味着当执行onTimer时，它可以通过这个.j引用j的正确值。我知道这确实令人困惑，但希望能有所帮助！

$(".inner").animate( { left: arrX[i], top: arrY[i]}, timeDiffs[i]);