basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    ich möchte eine Progressbar haben, die eine verbleibende Zeit anzeigt. Ich habe eine kleine Funktion, die das im Prinzip macht. Sie ist aber ungenau mit der Zeit. <div class="prehelp"><pre class="html_code"> <canvas id="canvas" width="500" height="600"></canvas> <script> var canv = document.getElementById("canvas"); var ctx = canv.getContext("2d"); function progMinus(x,y,w,h,zeit,iz){ //x, y , w, h Eingangsgrößen für das Rechteck Progressbar // zeit gibt an wieviel Sekunden die Progressbar aktiv ist // iz Aufruf setInterval var ist =w; zeit=zeit*1000; var progInterval = setInterval (function() { ist=ist-(w/zeit)*iz; ctx.fillStyle = "black"; ctx.clearRect(x,y,w,h); ctx.strokeRect(x,y,w,h); ctx.fillRect(x,y,ist,h); if( ist<=0 ) clearInterval(progInterval); }, iz); } progMinus(50,50,200,10,4,10); </script> </pre></div>

    Code

                                        
                                    
    <!DOCTYPE html>
    <html>
    <body>
    <div id="clock"></div>
    <canvas id="canvas" width="500" height="600"></canvas>
    <script>
    var canv = document.getElementById("canvas");
    var ctx = canv.getContext("2d");
    
    function go(){
    var start = new Date();
      function progMinus(x,y,w,h,zeit,iz){
        var ist =w;
        zeit=zeit*1000;
        var progInterval = setInterval (function() {
        ist=ist-(w/zeit)*iz;   
        ctx.fillStyle = "black";
        ctx.clearRect(x,y,w,h);   
        ctx.strokeRect(x,y,w,h);   
        ctx.fillRect(x,y,ist,h);
        if( ist<=0 ){
             clearInterval(progInterval);
        }
        var time = new Date() - start;
        document.getElementById('clock').innerHTML=time+' Millisekunden';
        }, iz);
      }
     progMinus(50,50,200,10,4,10);
    }
      canv.onload=go();
    </script>
    </body>
    </html>