JavaScriptプログレスバー - それに沿ってオブジェクトを移動

Question

私はw3schoolsのJavaScriptプログレスバーを調べて、プログレスバーがパーセントの増加に伴って動くようにコードを再調整しようとしましたが、 「フラグ」も動く。私のコードは動作していませんし、私はいくつかのことを試しました。ありがとうございました。

`` `

function showProgressByPercent() { 
    var bar = document.getElementById("progress-bar"); 
    var flag = document.getElementById("progress-flag"); 
    var currentPosition = parseInt(flag.style.left); 
    var width = 5; 
    var arg = setInterval(frame, 50); 
    function frame() { 
    if (width >= 100) { 
     clearInterval(arg); 
    } else { 
     width++; 
     bar.style.width = width + '%'; 
     flag.innerHTML = width * 1 + '%'; 
     flag.style.left = currentPosition * (width + '%') + 'px'; 
    } 
    } 
} 

` ``

何で最も興味深いのは、フラグ要素は、より簡単なコマンドで全く移動するかどうかを確認するためにテストする場合にも、そうでないということです。

JavaScriptを使用するまではJQueryを使用しないようにしてください。

JSFiddle：

https://jsfiddle.net/b28yh9hd/

Answer 1

あなたは動作しませんオペレータ*の文字列width + "%"として幅をミックスしようとしています。幅をピクセルを表す数値に変換する必要があります。私はバーの親ノードがプログレスバーのサイズであると仮定しています。私はそれを使用して、プログレスバーの合計幅を取得し、ピクセル幅で位置を計算することができます((width/100) * totalProgressWidth)。

また、インターバルタイマーでアニメートしないでください。DOM内の何かをアニメーションするたびに​​を使用する必要があります。本当に!!!! w3schools！

コードを変更しました。私はまだ進捗状況を更新するためにインターバルタイマーを使用しますが、DOMを更新するためにrequestAnimationFrameを使用します。

function showProgressByPercent() { 
    var bar = document.getElementById("progress-bar"); 
    // I am guessing that the parent has the fulll width 
    var progressTotal = bar.parentNode.getBoundingClientRect().width; 
    var flag = document.getElementById("progress-flag"); 
    var currentPosition = parseInt(flag.style.left); 
    var width = 5; 
    var handle = setInterval(frame,50); 
    requestAnimationFrame(display); 

    function display(){ 
     bar.style.width = width + '%'; 
     flag.innerHTML = width * 1 + '%'; 
     flag.style.left = (progressTotal.left + ((width/100) * progressTotal.width)) + 'px'; 
     if(width < 100){ 
      requestAnimationFrame(display); 
     } 
    } 
    function frame() { 
     if (width >= 100) { 
      width = 100; 
      clearInterval(handle); 
     } else { 
      width++; 
     } 
    } 
}