[JS]progress bar(dynamic img width)

[Freemann]

Ben bezig met een "voortgang balk". Eigenlijk moet het een balk worden die in een opgegeven tijd "volloopt". als ik bijvoorbeeld een begin percentage van 50 opgeef en een eind van 60 in een tijd van 1000 ms dan moet hij 10 procent vullen in 1 sec. En dat is iedere 100ms 1 procent en 1 procent is 4 pixels in de balk. In die 1 seconde moet het script dus 10 keer 4 pixels aan de balk toevoegen.

Wat ik nu heb gemaakt is het volgende:
divje_aanpassen("start percentage","eind percentage","de tijd dat hij er over moet doen","huidig percentage(om mee te nemen na de settimeout)")

JavaScript:

function divje_aanpassen(percentage_van,percentage_tot,tijd,huidig){
    document.getElementById("voortgang_procent").innerHTML = huidig+"%"; //laat huidig percentage zien in het element
    document.getElementById("progress_midden").innerHTML = ""; //maak de balk leeg,om optellen van images te voorkomen
    img     = document.createElement("img"); //creer een img element
    img.src = 'images/progress_midden.gif';
    breed = huidig*4; //4 pixels per procent
    img.width = breed;
    img.height = 12;
    
    percentage_verschil = percentage_tot - percentage_van; //bereken het verschil tussen het begin(60) en eind percentage(50) = 10% optellen
    tijd_per_stapje = tijd / percentage_verschil; //tijd is 1000ms ;bereken de tijd per % 


    while(huidig<=percentage_tot){
        alert(huidig);//geef het huidige percentage weer
        k = setTimeout('divje_aanpassen("percentage_van","percentage_tot","tijd","huidig")',tijd_per_stapje);//functie nogmaals aanroepen
        huidig++;
    if(huidig=percentage_tot){
        clearTimeout(k);//timeout stoppen
    }
    }
    divje = document.getElementById("progress_midden"); //var definieeren
    divje.appendChild(img);//img aan element toevoegen
}

Het scriptje vertoont niet het gedrag wat ik graag zou willen. Wat hij nu doet is getallen overslaan en de aler van "huidig" laat allerlei getallen zien....

Wat is de fout waardoor hij niet netjes optelt.... ?

[Verwijderd]

da's een probleem van variabele scope en het feit dat je strings doorgeeft, even oplossen door opnieuw een scope te maken

JavaScript:

setTimeout(function(){divje_aanpassen(percentage_van,percentage_tot,tijd,huidig},tijd_per_stapje);

[Freemann]

thanx for the response!

Zie nu alleen een fundamenteel probleem.
De While loop reset volgens mij iedere keer het percentage. Deze loopt natuurlijk RAZEND SNEL naar z'n eindpunt. Gevolg is dus dat in mijn ogen de timeout geen zin heeft.

Iemand een idee hoe ik dan middels een "vertraging" getallen op kan laten tellen?

[user109731]

Met behulp van setTimeout roep je een functie aan. In die functie moet je als laatste checken of je wil stoppen, zo nee: weer setTimeout aanroepen. Of je gebruikt setInterval ipv setTimeout.

Wat je nu doet is direct alle setTimeout's aanroepen, ze worden dus ook allemaal na het eerste interval uitgevoerd (setTimeout wacht niet tot de timeout opgetreden is).

[ Voor 9% gewijzigd door user109731 op 20-09-2007 09:35 ]

[Verwijderd]

hmz ja, had niet zo goed gekeken

De gein is dat je geen while moet doen, maar 1x je functie opnieuw aanroepen met andere parameters (een stapje verder), die roept dan (als dat nodig is) zichzelf weer opnieuw aan, etc.

Iets als

JavaScript:

if (huidig<percentage_tot){
        alert(huidig);//geef het huidige percentage weer
        k = setTimeout(function(){divje_aanpassen(percentage_van,percentage_tot,tijd,huidig++},tijd_per_stapje);//functie nogmaals aanroepen
    } 

[Freemann]

hij werkt (na een kleine aanpassing

JavaScript:

 if(huidig>percentage_tot){  // was eerst "gelijk aan" nu "groter dan"
        clearTimeout(k);//timeout stoppen 
    }

De uiteindelijke code is geworden(suggesties om het een en ander te optimaliseren zijn altijd welkom :

JavaScript:

function divje_aanpassen(percentage_van,percentage_tot,tijd,huidig){

    document.getElementById("voortgang_procent").innerHTML = huidig+"%";
    document.getElementById("progress_midden").innerHTML = "";
    //alert("a"+huidig);
    img     = document.createElement("img");
    img.src = 'images/progress_midden.gif';
    
    breed = huidig*4;
    img.width = breed;

    hoog = 12;
    img.height = hoog;
    
    percentage_tot= percentage_tot;
    percentage_verschil = percentage_tot - percentage_van;
    tijd_per_stapje = tijd / percentage_verschil;
    
    divje = document.getElementById("progress_midden");
    divje.appendChild(img);

    if (huidig<=percentage_tot){ 
       // alert(huidig+":"+percentage_tot);//geef het huidige percentage weer 
        k = setTimeout(function(){divje_aanpassen(percentage_van,percentage_tot,tijd,huidig)},tijd_per_stapje);//functie nogmaals aanroepen 
        huidig++; 
    }
    if(huidig>percentage_tot){ 
        clearTimeout(k);//timeout stoppen 
    }
}