マウスの軌跡を記録して再生するための js コード_javascript スキル

発生した問題:
質問
①: Mousemove イベントでは、多くの left と top が move メソッドに記録されます。必要なデータは数セットだけです。
Question②: 再生中、for ループの実行が速すぎて、開始位置と終了位置が直接表示されてしまいました。遅延関数を作成したのですが、それでもありませんでした。実質的な解決策。

小さな正方形を新しい位置までゆっくりとドラッグし、マウスを放します。

最初に「リセット」をクリックし、次に「再生」をクリックして、渡されたパスを表示します。
のみです。ワンチャンス - -|||

ループ内で遅延したコードの一部:

コードをコピー コードは次のとおりです:

//Delay メソッド
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 oSlippage .style.left = this. 🎜>}
}


スロー再生の効果はまだ達成されておらず、解決する必要があります。 。 。
あ、今朝解決しました～！
for ループは必要ありません。配列の添字を使用してタイマーを使用して、小さな正方形の左と上を連続的に変更します。

配列の添字と組み合わせたタイマー



コードをコピー

コードは次のとおりです: //遅延メソッドsleep: function(n) { //var start = new Date().getTime();

//while (true)

// if (new Date().getTime() - start > n)
// ブレーク;
var oSlippage = document.getElementById("lippage");
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 // 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); 🎜>

デモ効果:

<div style="border-bottom: #000000 1px solid; position: relative; border-left: #000000 1px solid; width: 500px; height: 200px; border-top: #000000 1px solid; border-right: #000000 1px solid" id="map"> <div style="z-index: 99; position: absolute; background-color: #000000; width: 30px; height: 30px; top: 50px; cursor: move; left: 50px; background-origin: initial; background-clip: initial" id="slippage" onmouseup="MOUSETRACKRECORD.mouseUp();" onmousemove="MOUSETRACKRECORD.mouseMove();" onmousedown="MOUSETRACKRECORD.mouseDown();"> </div>[Ctrl A すべて選択 注: </div>外部 Js を導入する必要がある場合は、<input id="Button1" onclick="MOUSETRACKRECORD.overTrack();" value="复位" type="button"> を実行するために更新する必要があります]<input id="Button2" onclick="MOUSETRACKRECORD.backTrack();" value="回放" type="button">