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>