JavaScriptの動作原理1

スポーツ財団

JavaScriptでは、どのようにページ要素を移動するために作るには？
まず、我々は知っている必要がありますJavaScriptで移動するページ要素を作成する方法です。

要素が移動するように、我々は、ボタンをクリックしたときのは、達成するための簡単な関数を見てみましょう。境界500に到達した後、すぐに停止しました。

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"> <title></title> <style> #d1 { width: 100px; height: 100px; background-color: red; position: absolute; top:100px; left: 200px; } </style> </head> <body> <button id="btn">点击运动</button> <div id="d1"></div> </body> <script> // 点击按钮,让div横向的运动起来 // 1. 获取元素 let oBtn = document.getElementById('btn'); let oDiv = document.getElementById('d1'); let iTimer = null; // 点击按钮,让元素一直运动 ,需要使用到的知识点:定时器 oBtn.onclick = ()=>{ iTimer = setInterval(()=>{ // 点击按钮之后,让div的位置在当前的基础之上每次增加10px的距离 // oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; // 虽然此代码可以让div动起来,但是我们需要div在运动之后到达某个边界就立刻停止,所以需要将此句代码改为一个判断 if (oDiv.offsetLeft === 500) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; } },30); }; </script> </html>

上記のコードでは、ボタンをクリックして、我々は、その後、要素はすでに直接移動することができますが、問題がある、問題は何ですか？

私たちは、ボタン要素が常に一定の速度で10pxの運動でクリックし、重要な500に達すると、その後停止します。しかし、私たちの問題はスピードになるかもしれないということです、例えば、速度が7pxなり、できなくなり
、正確な500の閾値に到達します。

例えば：

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"> <title></title> <style> #d1 { width: 100px; height: 100px; background-color: red; position: absolute; top:100px; left: 200px; } </style> </head> <body> <button id="btn">点击运动</button> <div id="d1"></div> </body> <script> // 点击按钮,让div横向的运动起来 // 1. 获取元素 let oBtn = document.getElementById('btn'); let oDiv = document.getElementById('d1'); let iTimer = null; // 点击按钮,让元素一直运动 ,需要使用到的知识点:定时器 oBtn.onclick = ()=>{ iTimer = setInterval(()=>{ // 点击按钮之后,让div的位置在当前的基础之上每次增加10px的距离 // oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; // 虽然此代码可以让div动起来,但是我们需要div在运动之后到达某个边界就立刻停止,所以需要将此句代码改为一个判断 if (oDiv.offsetLeft === 500) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv.style.left = oDiv.offsetLeft + 7 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动 } },30); }; </script> </html>

運動の臨界値は、速度を移動可能でなければならないので、これは発生割り切れる（即ちoDiv.offsetLeft + 7 +「PX」は、各移動の距離が行われる表します）。

最後の要素は常に臨界値に達することができないので、スピードのしきい値は、割り切れすることはできませんので、上記のコードの中で、それが臨界値に達したときに要素が停止方法はありません。

同時に、上記のコードでは別の問題は、我々は、各移動ボタンをクリックしたときに、我々は、タイマーの蓄積を設定する単純な理由が発生したため、スピード要素は、より速くなることです。

だから、どのように累積タイマーの問題を解決することにありますか？

私たちは、タイマーをクリアするために、各運動の前に開始することができます。

oBtn.onclick = ()=>{
            /*
            * 为了防止定时器累加，在每次开始定时器之前，先清楚掉一个定时器  
            * */
            clearInterval(iTimer);
            
            iTimer = setInterval(()=>{ // 点击按钮之后,让div的位置在当前的基础之上每次增加10px的距离 // oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; // 虽然此代码可以让div动起来,但是我们需要div在运动之后到达某个边界就立刻停止,所以需要将此句代码改为一个判断 if (oDiv.offsetLeft === 500) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv.style.left = oDiv.offsetLeft + 7 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动 } },30); };

概要：上記のコードでは、我々は通常動作中のプロセスの基本的な要素を作ります。シンプルな結論以下の行わ：

最初の問題である：要素がケースに臨界点で停止する方法の等速運動である割り切れません。

上記のコードでは、全体のプロセスは、大きく3つの段階に分けることができます。

クリアタイマーは、一つだけのタイマーが実行されていることを確認します

タイマーがなっています

運動中（一部又は要件を満たすために必要なときに、決意を添加しながら、必要なときに動作を停止）

パッケージのシンプルな動き

上記のコードは、より高い再利用性を持つことができるようにするためには、シンプルなパッケージのため、上記のコードをしましょう。

例：

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"> <title></title> <style> #d1 { width: 100px; height: 100px; background-color: red; position: absolute; top:100px; left: 200px; } </style> </head> <body> <button id="btn">点击运动</button> <div id="d1"></div> </body> <script> // 点击按钮,让div横向的运动起来 // 1. 获取元素 let oBtn = document.getElementById('btn'); let oDiv = document.getElementById('d1'); let iTimer = null; // 点击按钮,让元素一直运动 ,需要使用到的知识点:定时器 oBtn.onclick = ()=>{ startMove(); // 将运动相关的内容全部放到startMove这个函数中，然后调用既可以让元素进行运动 function startMove() { clearInterval(iTimer); iTimer = setInterval(()=>{ if (oDiv.offsetLeft === 500) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动 } },30); } }; </script> </html>

上記のコードでは、関数にスポーツ関連のコンテンツになりますstartMove。この機能に応じて、この関数が呼び出され、開発のための次のような場合。

ケース1：共有機能

まず、基本的な機能を達成するために最初：

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"> <title></title> <style> #div1 { width: 100px; height: 200px; background:red; position: absolute; left: -100px; top: 200px; } #div2 { width: 30px; height: 70px; background: black; position:absolute; right:-30px; top: 70px;; color:#fff; text-align: center; } </style> </head> <body> <div id="div1"> <div id="div2">分享到</div> </div> </body> <script> // 1. 首先获取两个元素 let oDiv1 = document.getElementById('div1'); let oDiv2 = document.getElementById('div2'); let iTimer = null; // 给为父级的div绑定mouseover 和 mouseout事件 oDiv1.onmouseover = function() { this.style.left = 0 + 'px'; // 鼠标移入,让div元素出现 }; oDiv1.onmouseout = function() { this.style.left = -100 + 'px'; // 鼠标移出,让div隐藏 }; </script> </html>

上記のコードは、我々は、マウスを動かす、要素が表示されます。マウスのうち、要素が消えます。
さんが登場すると、トランジションの効果を消える要素を追加するために私たちのstartMove機能を使用してみましょう。

私たちのstartMove機能は次のとおりです。

function startMove() {
    clearInterval(iTimer);
    iTimer = setInterval(()=>{ if (oDiv.offsetLeft === 500) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动 } },30); }

我々はしたい分享到、関数の中で我々は、需要に応じて、当社の機能を共有する必要がある変更をある程度、この機能を使用します。
最初は、私たちの関数でoDvi変化しますoDiv1。

第二に、我々は、マウスが移動したときに徐々に要素を表示する需要のケースを共有する必要がある、とマウスが出て、私たちは徐々に要素が隠されてする必要があります。だから我々はする必要があるstartMove二つの機能を作成
し、マウスが移動したときに、スピードは、関数であるべき+10なり-10。

もちろん、より多くの要素の境界の値を行くことを忘れないでください。削除すると、境界-100を移動したとき、境界は、ゼロです。

次のように：

マウスがstartMove1機能を移動したときに呼び出されます：

function startMove1() {
    clearInterval(iTimer);
    iTimer = setInterval(()=>{ if (oDiv1.offsetLeft === 0) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv1.style.left = oDiv.offsetLeft + 10 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动 } },30); }

マウスがstartMove2機能を削除されたときに呼び出されます：

function startMove() {
    clearInterval(iTimer);
    iTimer = setInterval(()=>{ if (oDiv1.offsetLeft === -100) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv1.style.left = oDiv.offsetLeft - 10 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动 } },30); }

のは、それをテスト、コードの中でこの2つの機能を見てみましょう。

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"> <title></title> <style> #div1 { width: 100px; height: 200px; background:red; position: absolute; left: -100px; top: 200px; } #div2 { width: 30px; height: 70px; background: black; position:absolute; right:-30px; top: 70px;; color:#fff; text-align: center; } </style> </head> <body> <div id="div1"> <div id="div2">分享到</div> </div> </body> <script> // 1. 首先获取两个元素 let oDiv1 = document.getElementById('div1'); let oDiv2 = document.getElementById('div2'); let iTimer = null; // 给为父级的div绑定mouseover 和 mouseout事件 oDiv1.onmouseover = function() { // this.style.left = 0 + 'px'; // 鼠标移入,让div元素出现 startMove1(); }; oDiv1.onmouseout = function() { // this.style.left = -100 + 'px'; // 鼠标移出,让div隐藏 startMove2(); }; function startMove1() { clearInterval(iTimer); iTimer = setInterval(()=>{ if (oDiv1.offsetLeft === 0) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv1.style.left = oDiv1.offsetLeft + 10 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动 } },30); } function startMove2() { clearInterval(iTimer); iTimer = setInterval(()=>{ if (oDiv1.offsetLeft === -100) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv1.style.left = oDiv1.offsetLeft - 10 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动 } },30); } </script> </html>

上記のコードは、我々は2つのstartMove関数を作成し、追加トランジション効果の機能を共有する私たちを可能にすることによって、対応するパラメータを変更します。

さらなるエスカレーションは：
もちろん、私たちが使用する機能で上記のコードは、実際には非常に柔軟であるので、我々はより実用的な機能を持つように我々は、機能をアップグレードする前に、次のことを行う必要があります。

まず、我々はそのようなの要素として、境界要素、移動など、あなたが実際にコードのほとんどが同じである、唯一の個々の値が異なっていることがわかります、戻って、私達はちょうど書かれた2つの機能を見て
、携帯単位時間を距離。

二つの機能を一つの関数にマージされ、上記パラメータ値が同じにすることはできませんとして私たちは、のみを抽出する必要があります。

ここでは、合併後の機能は次のとおりです。

function startMove(iTarget,iSpeed) {
    clearInterval(iTimer);
    iTimer = setInterval(()=>{ if (oDiv1.offsetLeft === iTarget) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px'; } },30); }

上記の機能のアップグレードが完了した後、我々は、コード関数に入るためにそれらのシェアにこの関数を再適用します。

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"> <title></title> <style> #div1 { width: 100px; height: 200px; background:red; position: absolute; left: -100px; top: 200px; } #div2 { width: 30px; height: 70px; background: black; position:absolute; right:-30px; top: 70px;; color:#fff; text-align: center; } </style> </head> <body> <div id="div1"> <div id="div2">分享到</div> </div> </body> <script> // 1. 首先获取两个元素 let oDiv1 = document.getElementById('div1'); let oDiv2 = document.getElementById('div2'); let iTimer = null; // 给为父级的div绑定mouseover 和 mouseout事件 oDiv1.onmouseover = function() { // this.style.left = 0 + 'px'; // 鼠标移入,让div元素出现 startMove(0,10); }; oDiv1.onmouseout = function() { // this.style.left = -100 + 'px'; // 鼠标移出,让div隐藏 startMove(-100,-10); }; function startMove(iTarget,iSpeed) { clearInterval(iTimer); iTimer = setInterval(()=>{ if (oDiv1.offsetLeft === iTarget) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px'; } },30); } </script> </html>

上記のコードは、我々が正常に当社startMove機能によりトランジション効果を共有する機能を追加します。

写真は、効果をフェード：

さらに以下に私たちはの効果を見て、图片的淡入淡出または我々は上記で定義されてstartMoveエフェクト機能を実現します。

まず、私達はちょうどのために、その上に機能しoDiv1、当社の機能は要素のいずれかを扱うことができるようにするために、我々はなります、oDiv1関数パラメータを交換してください。

例えば：

function startMove(oDom,iTarget,iSpeed) {
    clearInterval(iTimer);
    iTimer = setInterval(()=>{ if (oDom.offsetLeft === iTarget) { // 清除定时器 clearInterval(iTimer); }else { // 没有到达边界才能继续运动 oDom.style.left = oDom.offsetLeft + iSpeed + 'px'; } },30); }

上記のコードの中で、我々は動作要素が抽出されるの関数となる、関数のパラメータとなり、そうした後、我々は要素のいずれかのために私達の機能を行うことができます。

スポーツ財団

パッケージのシンプルな動き

おすすめ