css ladebalken ist zu schnell

[Andre1987]

Ich habe einen Ladebalken der vom Code so aus sieht
Funktion, CSS vom Balken und variablen die ihm übergeben werden:

// Die variablen
$timestamp = time();
$restzeit = $myWorkbis - $timestamp;
$einprozent = $myWorkDauer / 100;
$startzeit = round(100 - $restzeit / $einprozent);

// Anzeige in PHP
echo fortbalken($restzeit, 1, 800, $startzeit);


// Die Funktion in einer anderen Datei:

function fortbalken($rest, $id, $width, $starttime) {

// $rest ist die zeit von time() bis zur zielzeit
// Mit $id sorge ich dafür das ich mehrere Balken auf einer seite anzeigen kann.
// $width sagt wie lang der balken sein soll in px
// $starttime liest aus der DB wann er gestartet wurde. (in diesem fall wan ich mein Job im browsergame gestartet habe)

$rest2 = $rest + $starttime;

$anzeige = '   

<style>
.laden'.$id.'{
    width: '.$width.'px; /* Laenge des Balkens */
    height: 20px;  /* Hoehe des Balkens */
    border: 1px solid black;
    background-color:#000;
    text-align:left;
}

#balken'.$id.'{
    width: '.$width.'px; /* Laenge des Balkens */
    height: 20px;  /* Hoehe des Balkens */
    border-right: 1px solid black;
    background: #1e9720; /* Balkenfarbe */
    margin-left:0px;
    text-align:right;
}

#prozent'.$id.'{
    width: '.$width.'px;
    text-align:center;
    color: white;
    font: normal 1.0em;
}

</style>

        <script type="text/javascript">

var sekunden'.$id.' = \''.$rest2.'\'; 

function zaehle'.$id.'() {

    if (p'.$id.' < 99.99) {
        p'.$id.' = p'.$id.' + 0.1;
        document.getElementById(\'balken'.$id.'\').style.width = p'.$id.'.toFixed(0) + "%";
        document.getElementById(\'prozent'.$id.'\').innerHTML = p'.$id.'.toFixed(0) + "%";
    } else {
        window.clearInterval(intervalZaehle'.$id.');
    }
}

var p'.$id.' = '.$starttime.';
var intervalZaehle'.$id.' = window.setInterval(\'zaehle'.$id.'()\', sekunden'.$id.' );

</script> 


<div class="laden'.$id.'">
    <div id="balken'.$id.'"><div id="prozent'.$id.'"></div></div>
   
</div>
';

return $anzeige;

}

So jetzt ist mein Problem das mein Ladebalken zu schnell fertig ist. Also wenn man die Seite neu lädt springt er zurück. Sehr ärgerlich wen man sich freut, dass er fertig ist, aber dann wieder zurück springt.
Um so länger die Restzeit ist desto mehr springt er zurück.

Ich hoffe der Script ist ein wenig verständlich und irgendjemand kann mir sagen wo der Fehler liegt oder ob es eine viel leichtere Methode gibt. Ich bin kein Profi aber war mega Stolz, dass es so geklappt hat. Ach so wenn die Restzeit 60 Sekunden sind, klappt es fast perfekt. (aber auch nicht immer)

Liebe Grüße André

 

[goto;]

Hallo André,

das ist schon ziemlich krasser Code

Sicherlich könnte man den Fehler ausfindig machen, allerdings - für jeden Ladebalken neues CSS und JS ins DOM packen halte ich für keine Lösung.
Ein weiterer Punkt der deinen Code quasi unlesbar macht, ist PHP mitten im JS und CSS.

Lass uns das am besten neu und richtig machen.

Wie genau werden den die Daten abgerufen?
Woher ziehst Du die Restlaufzeit?
Hast Du Erfahrung mit Object"s" und Prototypes in JS?
Nutzt Du ein JS-Framework?

Viele Grüße

 

[Andre1987]

Die daten sind in meiner Datenbank gespeichert. Und zwar startzeit, zielzeit und dauer.
jeweils als time() gespeichert.

die restlaufzeit berechne ich so:

$timestamp = time() //Aktuelle zeit
$restzeit = $zielzeit - $timestamp; // Das ist die Restlaufzeit // die $zielzeit hole ich mir vorher aus der datenbank.

Was Js angeht bin ich absoluter neuling. Sonst haben mir code schnipsel gereicht
aber jetzt wird alles individueller und dadurch für mich schwerer.
Framework.. ich lasse es per echo ausgeben also den Balken.

Vielen dank das du dir die zeit nimmst mir zu helfen.