JavaScript Fortschrittsbalken - Verschieben eines Objekts mit ihm

Question

Ich untersuche die JavaScript-Fortschrittsleiste auf w3schools einen Versuch, den Code so umzuformatieren, dass der Fortschrittsbalken sich mit steigendem Prozentsatz bewegt, aber ein kleiner runder Knopf mit der ID "progress- Flagge "bewegt sich auch. Mein Code funktioniert nicht und ich habe mehrere Dinge ausprobiert. Vielen Dank.

`` `

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'; 
    } 
    } 
} 

` ``

Was besonders interessant ist, ist, dass selbst dann, wenn wenn das Flag Element zu sehen Testen wird an all mit einfachen Befehlen bewegen, es funktioniert nicht.

Versuchen Sie zu vermeiden, JQuery zu verwenden, bis ich den Einfluss von JavaScript bekomme.

JSFiddle:

https://jsfiddle.net/b28yh9hd/

Answer 1

Sie versuchen Breite als String width + "%" mit einem Operator zu mischen *, die nicht funktionieren. Sie müssen die Breite in eine Zahl umwandeln, die Pixel darstellt. Ich gehe davon aus, dass der Elternknoten von bar die Größe der Fortschrittsleiste ist. Ich verwende es, damit ich die Gesamtbreite des Fortschrittsbalkens ermitteln und dann die Position in Pixel Breite ((width/100) * totalProgressWidth) berechnen kann.

Auch sollten Sie nicht auf einen Intervall-Timer zu animieren, sollten Sie requestAnimationFrame immer verwenden, wenn Sie etwas im DOM animieren. w3schools wirklich !!!!

Ich habe Ihren Code geändert. Ich benutze immer noch einen Intervall-Timer, um den Fortschritt zu aktualisieren, aber ich benutze requestAnimationFrame, um das DOM zu aktualisieren.

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++; 
     } 
    } 
}