Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
3 Farben Prozessbalken

3 Farben Prozessbalken

Ein etwas anderer Prozessbalken. Der läuft 3-mal durch mit 3 verschiedene Farben.

Der hier verwendete Code

<html> <head> <style> body { background-color:#ccc; } h1 { text-align:center; } #ladebalken { height:22px; width:400px; border:1px solid red; margin:auto; } #fortschritt { height:22px; width:1px; background-color:red; border:none; text-align:center; } </style> </head> </html> <body> <h1>Lade einen Balken</h1> <div id="ladebalken"> <div id="fortschritt"><span id="prozente"> </span></div> </div> <p style="text-align: center"> <input type="button" onclick="ladenStoppen()" value=" Stoppen "> <input type="button" onclick="weiterLaden()" value=" Weiter Laden "> </p> <script> var pixel = 1; function ladeBalken() { pixel++; var ele=document.getElementById('fortschritt'); if (pixel <= 400) { if(pixel <= 160){ ele.style.backgroundColor='red'; }else if(pixel <= 320){ ele.style.backgroundColor='orange'; }else if(pixel <= 400){ ele.style.backgroundColor='green'; } var prozenta=pixel/4; prozent=prozenta.toFixed(2); document.getElementById('prozente').innerHTML=prozent+'%'; lade = window.setTimeout("ladeBalken()", 90); ele.style.width=pixel + "px"; } } ladeBalken() function ladenStoppen() { window.clearTimeout(lade); } function weiterLaden() { ladeBalken(); } </script>