JavaScriptのスポーツは、ウェブサイトでよく使用されます。今回は、スポーツの基本的なアプリケーションをいくつか紹介します。開発中に誰もが直接使用するのは便利です。
コードはシンプルで理解しやすく、初心者に適しています。最後に、自分のスポーツフレームワークを段階的に整理します。
アプリケーションケースレンダリング：
マウスを共有するように移動すると、左側のdivが表示されます。自分で削除して回復します。誰もがこれを非常に実用的に使用すると思います。コードがどのように実装されているかを見てみましょう。
コードコピーは次のとおりです。
<style type = "text/css">
＃div1 {
幅：150px;
高さ：200px;
背景：緑;
位置：絶対;
左：-150px;
}
＃div1 span {
位置：絶対;
幅：20px;
高さ：60px;
ラインハイト：20px;
背景：青;
右：-20px;
上：70px;
}
</style>
コードコピーは次のとおりです。
<body>
<div id = "div1">
<span>
に共有します
</span>
</div>
</body>
以下はJavaScriptコードです
コードコピーは次のとおりです。
<script type = "text/javascript">
window.onload = function（）{
var odiv = document.getElementById（ "div1"）;
odiv.onmouseover = function（）{
StartMove（0）;
};
odiv.onmouseout = function（）{
StartMove（-150）;
};
}
var time = null;
function startmove（itraget）{
var odiv = document.getElementById（ "div1"）;
ClearInterval（時間）;
time = setInterval（function（）{
var速度= 0;
if（odiv.offsetLeft> itraget）{
速度= -10;
}それ以外{
速度= 10;
}
if（odiv.offsetLeft == itraget）{
ClearInterval（時間）;
}それ以外{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
}、30）;
}
</script>
アイデア：
スタイルの最初の左は-150です。 divは内部で縮小され、0が与えられた場合に表示されます。その後、この値を変更する必要があります
StartMoveのパラメーターItargetはターゲットポイントであり、停止するターゲットポイントを示します。
速度のサイズを制御すると、動きの速度を制御できます。ターゲットポイントに到達した場合は、タイマーを停止します。
法：
* 予測
*左：30 itarget：300右側に正で得られる
*左：600 itarget：50左側に負です
*
*左の位置とターゲットポイントの関係は、正と負の速度を導入します
注：共有するたびにタイマーがオンになるため、開始するとすぐにタイマーをオフにする必要があります。オンにするほど、速度が速くなります。これは、同時に実行する複数のタイマーがあるためです。
したがって、毎回1つのタイマーが機能することを確認する必要があります。
フォロー：同じ関数関数、パラメーターが少ないほど良いので、上記のルールによれば、速度はパラメーターとして渡されません。
人生の例を挙げると、タクシーに乗ってタクシーの運転手に100ヤードの場所に行くことができることを伝えることは一般的に不可能です。あなたはあなたがどれだけ速く走りたいかをマスターに伝えることができません
したがって、プログラムは同じであるため、速度パラメーターはここで削除されます。
もちろん、現在のスポーツフレームワークには多くの問題があります。これは、将来次々と解決されます。次の記事では、均一な動きを止める方法について説明しましょう。